Sassを使った効率的CSSコーディング術

3-3. 条件分岐とループ処理を組み合わせて使ってみる

Sassで使える条件分岐(if)とループ処理(each,for,while)について説明を行ってきましたが、これらは組み合わせることでより複雑なロジックを組んでCSSを出力することができます。工夫次第でコードを書く量が減り、作業が効率化出来ます。

  • HTML・CSS

公開日:2019/06/18最終更新日:2019/06/18

スポンサーリンク

1.@forと@ifを組み合わせて、繰り返しのパターンを変える

@forで繰り返しを行い、その中に@ifで条件分岐をさせると、繰り返しのパターンを途中で切り替えながら出力することができます。

サンプルのコードです。12回繰り返し、最初の4つ・途中の4つ・最後の4つで出力される色が切り替わります。

@for$i from 1 through 12 {
  @if $i <= 4 {
    .item-#{$i}{
      color: red;
    }
  }@else if $i <= 8 {
    .item-#{$i} {
      color: green;
    }
  }@else {
    .item-#{$i} {
      color: blue;
    }
  }
}

コンパイル結果です。

.item-1 { color: red; }
.item-2 { color: red; }
.item-3 { color: red; }
.item-4 { color: red; }
.item-5 { color: green; }
.item-6 { color: green; }
.item-7 { color: green; }
.item-8 { color: green; }
.item-9 { color: blue; }
.item-10 { color: blue; }
.item-11 { color: blue; }
.item-12 { color: blue; }

2.@eachと@forを組み合わせて、ループ処理を入れ子状に使う

ループ処理も組み合わせると複雑な繰り返しを出力することができます。

サンプルのコードです。グリッド風のカラムをスマホとPCで分けて出力します。

$column: 5;
@each $breakpoint in sp, pc {
  @for $i from 1 through $column {
    .col-#{$breakpoint}-#{$i} {
      width: percentage($i / $column);
    }
  }
}

コンパイル結果です。

.col-sp-1 { width: 20%; }
.col-sp-2 { width: 40%; }
.col-sp-3 { width: 60%; }
.col-sp-4 { width: 80%; }
.col-sp-5 { width: 100%; }
.col-pc-1 { width: 20%; }
.col-pc-2 { width: 40%; }
.col-pc-3 { width: 60%; }
.col-pc-4 { width: 80%; }
.col-pc-5 { width: 100%; }

3.@mixinや@function内で使うとより便利に

ここまで紹介してきた@if・@each・@for・@whileは@mixinや@functionの中で使うと、実力を発揮します。

パズルを組み合わせる感覚で、どんな工夫ができるかいろいろ考えてみましょう。

次のレッスンからは、コーディングの現場でよく使われる@mixinをまとめて紹介します。

理解度チェック

スポンサーリンク

このレッスンの著者