scss
bootstrap

Bootstrapメモ②(SCSSの利用)

学習履歴

■はじめに

前回、Bootstrapメモ①にて、Bootstrap の基本的な使い方を学んだ。

その中で、scss に興味が出たので使い方を学んでみた。

■環境

PC : Mac
Editor : vim

■scssの使い方

1.scssとは

scss は、 css を効率的に書くためのツールで、 css をプログラミングチックに
書くことができる。

記法は .sass と .scss の 2 種類あるが、ここでは scss を使っていく。

2.インストール方法

scss は、Ruby が必要なのでインストールする必要がある。

windows 環境では、前回インストールした。

Mac には、最初から Ruby がインストールされているので、バージョンに拘りがなければ
以下のコマンドでインストールできる。

導入.コマンド
# sass で問題ない(元々は、sassだった)
$ gem install sass

3.作業フォルダ作成

Desktop 上に Workplace フォルダを作成し、その中に css フォルダと scss フォルダを作成する。

例.作業フォルダ
Desktop
Lworkplace
  Lcss
  Lscss

4.sass の利用

scss は以下の方法で利用する。

<scssの利用>
1. scss ファイルを用意
2. sass コマンドでコンパイル
3. css 生成を確認

scss ファイルを作成しただけでは利用できず、利用するためには一回コンパイルして、
css ファイルを生成する必要がある。

コンパルは、Windows 環境ならコマンドライン、Mac 環境なら terminal から sass コマンドを実行して行う。

5.コンパイル

scss フォルダに style.scss ファイルを作成しよう。

scss の書き方は、 css と似たような感じだ。

scss/style.scss
#first {
    width: 30px;
    p {
        font-size: 14px;
    }
}

通常の css の場合は、以下のように書く必要があるので、冗長となっている部分が省かれて
効率よく記載できることがわかる。
(この例は短いのでわかりずらいかもしれない)

例.css
#first {
   width: 40px;
}
#first p{
  font-size: 14px;
}

では、コンパイルしてみよう。

例.コンパイル
# sass scssファイル:cssファイル(ファイルがない場合は自動生成)
$ sass scss/style.scss:css/style.css  

上記のコマンドを実行すると css フォルダ配下に style.css ファイルが作成される。

css/style.css
#first {
  width: 30px; }
  #first p {
    font-size: 14px; }

/*# sourceMappingURL=style.css.map */

6.コンパイル時の字下げオプション(--style expanded)

生成された css の見栄えが悪いので、コンパイルのオプションをつけて再実行しよう。

$ sass --style expanded scss/style.scss:css/style.css

「--style expanded」 オプションを付与することで、以下のように見やすい表記で css を作成できる。

css/style.css
#first {
  width: 30px;
}
#first p {
  font-size: 14px;
}

/*# sourceMappingURL=style.css.map */

7.自動コンパイル(--watch)

sass コマンドでコンパイルを行うわけだが、「--watch」 オプションを付与すると
ファイルに変更があった場合に自動的にコンパイルしてくれるようになる。

# ファイルを監視
$ sass --style expanded --watch scss/style.scss:css/style.css

# フォルダごと監視
$ sass --style expanded --watch scss:css

>>> Sass is watching for changes. Press Ctrl-C to stop.

Ctrl-C で監視は解除される。

8.コメント

scss ファイルのコメントは、以下のようになる。

scss/style.scss
/* コメント */
/*
 コメント
*/

// コメント

#first {
    width: 30px;
    p {
        font-size: 16px;
    }
}

面白いのが、コンパイル後の css だ。

// のコメントが反映されていないことがわかる。

css/style.css
@charset "UTF-8";
/* コメント */
/*
 コメント
*/
#first {
  width: 30px;
}
#first p {
  font-size: 16px;
}

/*# sourceMappingURL=style.css.map */

開発の時だけ // で書いておけばリリース後の css ファイルに余分なコメントの記載を防げる。

9.&要素

マウスオーバー時、クリックした時など、何らかの親要素を指定してスタイルすることがある。

例えば、 a タグの場合は、 a:hover とすると a タグにマウスが当たった場合の動作を
指定してスタイリングすることができる。

scss でこれを実現する為には、 & 要素を使えばいい。

scss/style.scss
a {
    text-decoration: none;
    &:hover {
        font-weight: bold;
    }
}
css/style.css
a {
  text-decoration: none;
}
a:hover {
  font-weight: bold;
}

10. 変数

プログラムと同じように scss でも変数が使える。

scss/style.scss
// 変数を宣言
$fontSize: 16px;
p {
    font-size: $fontSize;
}
css/style.css
p {
  font-size: 16px;
}

11.変数の計算

変数を使って足し算・引き算などの計算もできる。

scss/style.scss
// 変数を宣言
$fontSize: 16px;

p {
    font-size: $fontSize;
    .base {
        font-size: $fontSize - 10px;
    }
}
css/style.css
p {
  font-size: 16px;
}
p .base {
  font-size: 6px;
}

/*# sourceMappingURL=style.css.map */

12.文字列操作

数値だけではなく文字列も扱うことができる。

scss/style.css
$baseDir: "css/";

div {
    background: url($baseDir + "hogehoge.css");
}
css/style.css
div {
  background: url("css/hogehoge.css");
}

変数を 「#{}」 で囲めば、文字列の中に変数を記述しても展開ができる。

scss/style.scss
$baseDir: "css/";

div {
    background: url("#{$baseDir}hogehoge.css");
}
css/style.css
div {
  background: url("css/hogehoge.css");
}

13.条件分岐

条件分岐も普通のプログラムと同様に使用することができる。

scss/style.scss
$condition: true;

// 条件分岐 @if @else
body {
    @if $condition == true {
        color: green;
    } @else if $condition == none {
        color: yellow;
    } @else {
        color: red;
    }
}
css/style.css
body {
  color: green;
}

14.繰り返し処理

繰り返し処理もできる。

まずは、for 文を使ってみよう。

scss/style.scss
// ループ @for

@for $i from 1 through 10 {
    .item#{$i} { width: #{$i}px;}
}
css/style.css
.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

.item4 {
  width: 4px;
}

.item5 {
  width: 5px;
}

.item6 {
  width: 6px;
}

.item7 {
  width: 7px;
}

.item8 {
  width: 8px;
}

.item9 {
  width: 9px;
}

.item10 {
  width: 10px;
}

/*# sourceMappingURL=style.css.map */

一瞬だ。

while 文でも同じようにループ処理ができる。

scss/style.scss
// ループ - @while

$i: 1;
@while $i <= 10 {
    .item#{$i} { width: #{$i}px;}
    $i: $i + 1;
}

結果は同じのため、割愛する。

15.リスト

リスト(配列)の概念もある。

scss/style.scss
// リスト
$foods: meat, vegetable, fish;

@each $food in $foods {
    .#{$food} { background: url("#{$food}.png");}
}
css/style.css
.meat {
  background: url("meat.png");
}

.vegetable {
  background: url("vegetable.png");
}

.fish {
  background: url("fish.png");
}

16.関数

関数も使える。

scss/style.scss
// 関数

// サイトの横幅
$siteWidth: 980px;

// サイトの列数
$columnNumber: 5;

// 列の横幅を取得
@function getColumnWidth($width, $count){
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    // デバッグ用
    @debug $columnWidth;
    @return $columnWidth;
}

.grid {
    // 横幅を設定
    width: getColumnWidth($siteWidth, $columnNumber);
}
css/style.css
.grid {
  width: 188px;
}

ちなみに scss にも変数のスコープの概念がある。

17.ファイルの管理

css や javascript と同様にファイルを分離することができる。

別ファイルを作成するときは、「_ファイル名.scss」 と命名する必要がある。

「_values.scss」, 「_functions.scss」, 「style.scss」 に分離してみよう。

scss/_values.scss
// サイトの横幅
$siteWidth: 980px;

// サイトの列数
$columnNumber: 5;
scss/_functions.scss
// 列の横幅を取得
@function getColumnWidth($width, $count){
    $padding: 10px;
    $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
    @debug $columnWidth;
    @return $columnWidth;
}
scss/style.scss
// ファイルをインポート
@import "values";
@import "functions";

.grid {
    // 横幅を設定
    width: getColumnWidth($siteWidth, $columnNumber);
}
css/style.css
.grid {
  width: 188px;
}

これは、絶対便利だと思う。

18.要素の定義(@mixin)

一度定義した要素は他の要素で再利用できる。

scss/style.scss
@mixin site_width_and_height {
    width: 20px;
    height: 10px;
}

.right_label {
    @include site_width_and_height;
}

.middle_label {
    @include site_width_and_height;
}

.left_label {
    @include site_width_and_height;
}
css/style.css
.right_label {
  width: 20px;
  height: 10px;
}

.middle_label {
  width: 20px;
  height: 10px;
}

.left_label {
  width: 20px;
  height: 10px;
}

/*# sourceMappingURL=style.css.map */

これだけでも便利だが、@mixin は引数も持てる。

scss/style.scss
// 初期値も設定できる
@mixin site_width_and_height($width:10px, $height:20px) {
    width: $width;
    height: $height;
}

.right_label {
    // 初期値を使うため、引数なし
    @include site_width_and_height();
}

.middle_label {
    @include site_width_and_height(30, 40);
}

.left_label {
    @include site_width_and_height(50, 60);
}
css/style.css
.right_label {
  width: 10;
  height: 20;
}

.middle_label {
  width: 30;
  height: 40;
}

.left_label {
  width: 50;
  height: 60;
}

便利だ。

19.継承(@extend)

スタイルを作成していると似たような要素の重複が多々発生した経験は誰にもあると思うが、
そんな時に継承を使えば、すっきり書くことができる。

scss/style.scss
// 継承
.message {
    font-size: 10px;
    font-weight: 20px;
    padding: 20px;
    color: black;
}

.errormessage {
    @extend .message;
    background: red;
}

.warningmessage {
    @extend .message;
    background: orange;
}
css/style.css
.message, .errormessage, .warningmessage {
  font-size: 10px;
  font-weight: 20px;
  padding: 20px;
  color: black;
}

.errormessage {
  background: red;
}

.warningmessage {
  background: orange;
}

ちなみにこの場合は、@mixin は使用しない。

出力結果を見ればわかると思うが、@mixin は同じ要素を繰り返し出力し、@extend
重複部分を纏めてくれるからだ。

■まとめ

scss を使えばプログラミングチックに css を作成できる。
プログラミングは好きだが、デザインは好きでない人もこれなら楽しんでデザインができるんじゃないかと思う。