きまぐれ引きこもりんご80%

【第9回】Sassってみよう!〜@each @if @function編〜

web制作

前回ご紹介したループ処理には@for、@while以外にも
リストを繰り返し処理することが出来る@eachがあります。
今回はその「@each」「条件分岐(@if)」「関数(@function)」をまとめてご紹介します。
と言いながら実は、条件分岐、関数などは実務で使用したことはありません…。
ですので、実践的な使用例はご紹介できませんが、Sassにはこういう機能もあるんだという程度で読んで頂ければと思います。

@eachの使い方

それではまず「@each」の使い方から。
前回ご紹介したように@forと@whileは数値を繰り返し処理することが出来ました。この繰り返し処理を文字列に対して行えるのが「@each」で、リストに対してループ処理ができます。
では、どのように使用するのか具体的にみていきましょう。
例えば、「ossan」「obahan」「youngman」とクラス分けしたセクションがあったとします。
これをリストにして、セクションごとに背景画像を変えたい場合を例にご説明します。

まず基本的な使い方は下記の通りです。

@each $変数 in リスト { ... }

これを前述の例にあてはめると次のようになります。
(※リストはカンマ、スペース、()のいずれかで区切ります)

@each $name in ossan, obahan, youngman {
  .#{$name} {
    background: url(#{$name}.png);	
  }
}

cssにコンパイル後 ↓

.ossan { background: url(ossan.png);}
.obahan { background: url(obahan.png);}
.youngman { background: url(youngman.png);}

「@each」の利点として、「babaa」セクションが新しく追加されたとしてもリストの部分に「babaa」を追加するだけで対応できるので便利です。

@each $name in ossan, obahan, youngman, babaa { ... }

また、変数のところでご説明しましたが、リストに変数を使用することができます。

$list: ossan, obahan, youngman;
@each $name in $list {
  .#{$name} {
    background: url(#{$name}.png);	
  }
}

「@each」はページシグネチャを使用してページごとにスタイルをわりふる時にも便利な機能ですね。

@ifの使い方

次に条件分岐をみていきましょう。
これは基本的にプログラミングの条件分岐と同じです。
@ifの後に条件を記述し、その後の{ }の中にスタイル書きます。
最初の条件に合わない場合は@else if、@elseで分岐していきます。
他のプログラミング言語同様、条件には比較演算子が使用できます。
(==、>、>=、<、<=、!=、and、or、not)

@if 条件A { スタイルA }
//条件Aに合えばスタイルAを適用
@else if 条件B { スタイルB }
//条件Aは合わないが条件Bに合えばスタイルBを適用
@else { スタイルC }
//条件A、B以外はスタイルCを適用

それでは、@ifを使用して01〜20のリスト番号を条件分岐で作成してみましょう。

$num: "";
@for $i from 0 through 20 {
  @if $i == 0 {
    $num: null;
  } @else if $i < 10 {
    $num: "0#{$i}";
  } @else {
    $num: $i;
  }
  .list#{$num} {
    background: url(list#{$num}.png);
  }
}

cssにコンパイル後 ↓

.list { background: url(list.png);}
.list01 { background: url(list01.png);}
〜
.list09 { background: url(list09.png);}
.list10 { background: url(list10.png);}
.list11 { background: url(list11.png);}
〜
.list20 { background: url(list20.png);}

※変数にはNull型(空値)も指定できます。

@functionの使い方

次に関数をみていきましょう。
これも基本的にはプログラミングの関数と同じです。
@functionの後に関数名と引数を記述し、{ }の中に処理内容を@returnで返します。もちろん引数には初期値を設定することもできます。

@function 関数名(引数) { @return 戻り値; }

では960pxのサイト幅に対して、boxのピクセル幅をパーセント表示に変換する関数をつくってみましょう。

$container: 960px;
@function percent($pixel) {
  @return ($pixel / $container) * 100%;
}
.box {
  width: percent(300px);
}

cssにコンパイル後 ↓

.box {
  width: 31.25%;
}

これでもよいのですが、端数を小数点切り捨てのfloorという組み込み関数で整数にしてみましょう。

$container: 960px;
@function percent($pixel) {
  @return floor(($pixel / $container) * 100%);
}
.box {
  width: percent(300px);
}

cssにコンパイル後 ↓

.box {
  width: 31%;
}

これで整数になりましたね。

以前の記事でも取り上げましたが、この他にも
rgba、lighten、darken、saturate、round、ceilなど便利な組み込み関数があるので検索してみてください。

http://sass-lang.com/documentation/Sass/Script/Functions.html

オリジナルの関数名をつける時は、これらと被らないように注意しましょう。

とりあえず、今回で「Sassってみよう!」シリーズは終了です。
今シリーズではSassの基本的な使い方をご紹介してきましたが、
まだまだ便利な機能や使い方がありますし、
Compassなど、ここで紹介していないことが沢山あります。
専門書を購入したり、より詳しく勉強することで、
大規模なサイトほどSassの機能を活かして
効率のよいスタイリングができそうですね。