@ Sass

Sassの制御構造

Sass では、「条件分岐」や「繰り返し処理」といった制御構造使うことができます。

@ifを使った条件分岐

次に示す例では、変数の真偽値を基に、CSS 出力の分岐を行っています。

変数「$generalStyle」の値が「true」の場合、コンパイル後の CSS に class 名が付いたスタイルが生成されます。

style.scss

$generalStyle: ture;
@if $generalStyle {
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
}

コンパイル後の CSS は次のようになります。

style.css

.fl {
  float: left;
}

.fr {
  float: right;
}

次の例では、@if と @else if @else を組み合わせて、変数「$getStyle」の「値を」基に、いくつかのスタイルを1つのミックスインで生成しています。

style.scss

$getStyle: 0;

@mixin style {
  @if $getStyle == 1 {
    margin: 0 0 30px;
    padding: 15px;
    background: #eee;
  }
  @else if $getStyle == 2 {
    margin: 0 10px 15px;
    padding: 20px 15px;
    border: 2px solid #333;
  }
  @else {
    margin: 0 0 10px;
  }
}

.box {
  @include style;
}

コンパイル後の CSS は次のようになります。

style.css

.box {
  margin: 0 0 10px;
}

@for を使った繰り返し処理

@for には2つの構文があります。

exampl1e.scss

@for $変数名 from 開始の数値 through 終了の数値 {
  something TODO
}

example2.scss

@for $変数名 from 開始の数値 to 終了の数値 {
  something TODO
}

through と to では繰り返し終了の数値に違いがあります。

through は指定した数値を含み、to は指定した数値を含みません。

次の例では、最初の「from 1 through 3」は3回繰り返し処理が実行され、2つ目の「from 1 to 3」は、繰り返し処理が実行は2回になります。

style.scss

@for $value from 1 through 3 {
  .throughSample_#{$value} {
    margin-bottom: 1px * $value;
  }
}

@for $value from 1 to 3 {
  .toSample_#{$value} {
    margin-bottom: 1px * $value;
  }
}

コンパイル後の CSS は次のようになります。

style.css

.throughSample_1 {
  margin-bottom: 1px;
}

.throughSample_2 {
  margin-bottom: 2px;
}

.throughSample_3 {
  margin-bottom: 3px;
}

.toSample_1 {
  margin-bottom: 1px;
}

.toSample_2 {
  margin-bottom: 2px;
}

次の例では、10px ずつ増える余白調整用の class を生成します。

style.scss

@for $value from 1 through 2 {
  .mt_#{$value * 10} {
    margin-top: 10px * $value;
  }
  .mb_#{$value * 10} {
    margin-bottom: 10px * $value;
  }
}

コンパイル後の CSS は次のようになります。

style.css

.mt_10 {
  margin-top: 10px;
}

.mb_10 {
  margin-bottom: 10px;
}

.mt_20 {
  margin-top: 20px;
}

.mb_20 {
  margin-bottom: 20px;
}

@while を使った繰り返し処理

@while を使い @for より複雑な繰り返し処理を行うこともできます。

@while の構文は次のようになります。

example.scss

@while 繰り返しを継続する条件 {
  ・・・スタイルなど・・・
  増減方法
}

@while の使用例を次に示します。

style.scss

$value: 20;
@while $value > 0 {
  .mt_#{$value} {
    margin-top: $value + px;
  }
  .mb_#{$value} {
    margin-bottom: $value + px;
  }
  $value: $value - 10;
}

コンパイル後の CSS は次のようになります。

style.css

.mt_20 {
  margin-top: 20px;
}

.mb_20 {
  margin-bottom: 20px;
}

.mt_10 {
  margin-top: 10px;
}

.mb_10 {
  margin-bottom: 10px;
}

次は、少し複雑な繰り返し処理の例です。

style.scss

$value: 300;
@while $value > 200 {
  .box_#{$value} {
    width: 2px * $value;
  }
  $value: $value - 32;
}

コンパイル後の CSS は次のようになります。

style.css

.box_300 {
  width: 600px;
}

.box_268 {
  width: 536px;
}

.box_236 {
  width: 472px;
}

.box_204 {
  width: 408px;
}

@for では、1ずつ増減させながら、繰り返し処理の実行が行われましたが、@while では、増減方法の設定で、@for よりも複雑な処理を行うことができます。

@each でリスト(配列)の要素に対して繰り返し処理を実行する

@each は、リストの要素それぞれにたいして処理を実行することができます。

@each の構文は次ようになっています。

example.scss

@each $変数名 in リスト {
  ・・・スタイルなど・・・
}

リストは ,(カンマ)区切りで文字列を扱うことができます。

次のように、CSS シグネチャなど、一定のルールでセレクタ名や背景画像のパスが変わる場合に、@each を使うことで、ページが」増えた場合で、スタイルを簡単に追加することができます。

style.scss

$nameList: top, about, company, contact;

@each $name in $nameList {
  .body-#{$name} {
    background-image: url(../img/bg_#{$name}.png);
  }
}

コンパイル後の CSS は次のようになります。

style.css

.body-top {
  background-image: url(../img/bg_top.png);
}

.body-about {
  background-image: url(../img/bg_about.png);
}

.body-company {
  background-image: url(../img/bg_company.png);
}

.body-contact {
  background-image: url(../img/bg_contact.png);
}