今回はSassの制御構文について解説していきます。 制御構文が使えるようになると、条件によってスタイルを振り分けたり、繰り返し指定するスタイルの記述を短縮できたりするので、理解しておきたい機能です。

制御構文とは

通常プログラムは上から下へ順番に処理されていきます。その流れを途中で分岐させたり、流れを繰り返したりすることができる構文を制御構文といいます。
これを用いることでより複雑な処理が可能になったり、プログラムの流れを途中で変えたり繰り返したりすることができます。

Sassも他のプログラムと同じく制御構文が使えるので、CSSより柔軟で複雑な処理が可能となります。
Sassの制御構文ではSass変数を使用します。Sass変数については過去記事で取り上げていますので、そちらを参照ください。
【Sass実践編】Sassを使いこなす第一歩、「変数」の書き方と使い方！

Sassの制御構文は条件分岐の @if と、繰り返し処理の @for 、 @while 、 @each があります。個別にみていきましょう。

@ifを使った条件分岐

@ifとは特定の条件を指定し、その条件を満たすかどうかでその後の処理を決める制御構文です。
@else ifと@elseを組み合わせることで、@ifで指定した条件を満たさなかった時の条件追加や、いずれの条件にも該当しなかった時の処理を追加できます。

基本的な構文は下記のようになります。

@if 条件A {
  スタイルA
}
@else if 条件B {
  スタイルB
}
@else {
  スタイルC
}

条件Aが成立した場合は、スタイルAが反映されます。
条件Aが成立しなかった場合は条件Bの真偽を判断し、条件Bが成立すればスタイルBが、成立しなければスタイルCが反映されます。

実際の利用例としては下記のようになります。

$category: news;
@if $category == news {
    .button001 {
        width: 200px;
    }
}
@else {
    .button001 {
        width: 100%;
    }
}

定義した変数が特定の条件を満たしている場合、上記であればnewsの場合、button001クラスの横幅を200pxにする条件分岐です。
この場合、$category変数がnewsであるため、コンパイル後は最初の条件が成立した場合のスタイルのみ記述されます。

.button001 {
  width: 200px;
}

条件式につかえる比較演算子は次のものがあります。

論理演算子について、「&&」「||」はSassでは使えませんが、代わりに次のものが使用できます。

論理演算子は条件式の中で複数の条件を組み合わせる場合、下記のように使用します。

$value: 20;
@if $value > 10 and $value < 100 {
  $valueが10よりも大きくてかつ100よりも小さい場合スタイルを反映
}

このように比較演算子と論理演算子を組み合わせることで、より複雑な条件の設定が可能となります。

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

@forは指定した開始値から終了値まで、1ずつ数字を増やしながら処理を繰り返していく制御構文です。
基本的な構文は次の2種類になります。

@for $変数名 from 開始値 through 終了値 {
  スタイルなど
}

@for $変数名 from 開始値 to 終了値 {
  スタイルなど
}

throughの場合は終了値を含めて繰り返し処理をします。toの場合は終了値を含めずに繰り返し処理をします。
実際の利用例としては次のようになります。

@for $num from 1 through 3 {
    .ma-top--#{$num * 10} {
        margin-top: $num * 10 + px;
    }
}

変数$numに開始値の1から数字を代入して中の処理を実行していきます。実行したらまた$numに1増やした数字を代入し処理を実行。これを終了値の3になるまで繰り返します。この記述をコンパイルすると次のようになります。

.ma-top--10 {
  margin-top: 10px;
}

.ma-top--20 {
  margin-top: 20px;
}

.ma-top--30 {
  margin-top: 30px;
}

1から3まで$numに代入され処理が実行されたものがCSSとして書き出されました。

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

@whileは、条件に当てはまる間繰り返し処理をする制御構文です。
基本的な構文は次のようになります。

@while 繰り返しを継続する条件 {
  スタイルなど
  繰り返し方を指定
}

@forは開始値と終了値の間で数値が1ずつ増えていったのに対し、@whileは増やし方や減らし方を指定できるので、より複雑な繰り返し処理を行うこともできます。
実際の利用例としては次のようになります。

$value : 8;
@while $value < 35 {
    .ma-bottom--#{$value} {
        margin-bottom: $value + px;
    }
    $value: $value + 12;
}

まず変数$valueを定義します。$valueに数値を代入し処理を実行した後、$valueに12を加えたものを$valueに代入し処理を実行します。
これを$valueが35を超えるまで繰り返します。

.ma-bottom--8 {
  margin-bottom: 8px;
}

.ma-bottom--20 {
  margin-bottom: 20px;
}

.ma-bottom--32 {
  margin-bottom: 32px;
}

@eachを使った配列による繰り返し処理

@eachは配列の要素に対して、それぞれ処理を実行する制御構文です。
基本的な構文は次のようになります。

@each $変数名 in 配列 {
  スタイルなど
}

実際の利用例としては次のようになります。

$categoryList: important, service, products;
@each $category in $categoryList {
    .#{$category} .category-img {
        bsckground-image : url(../../image/bg-#{$category}.jpg);
    }
}

まず変数$categoryListで配列を定義します。@each内で使う変数$categoryに先ほど定義した配列の中身の最初の要素を代入し処理します。
処理が終わったら配列内の次の要素を代入し処理を進めます。これを配列の要素全てに対して行います。
したがって、@eachのすぐ後の変数は@each内で使う変数、inの後の変数は配列を定義した変数となります。

.important .category-img {
  bsckground-image: url(../../image/bg-important.jpg);
}

.service .category-img {
  bsckground-image: url(../../image/bg-service.jpg);
}

.products .category-img {
  bsckground-image: url(../../image/bg-products.jpg);
}

配列内全ての要素をそれぞれ処理されたものが書き出されました。
上記の例であれば、カテゴリーが追加される際は配列内に要素を追加するだけなので、メンテナンスにも優れていますね。

さいごに

今回はSassの制御構文について紹介しました。これらの構文を使うことにより効率的に記述できるようになるほか、メンテナンス面でも非常に効果が高いことがご理解いただけたかと思います。
この記事でますますSassを効率的に使っていただけたら幸いです。

この記事を書いた人

加藤 陵二ソリューション事業部 webデザイナー

アーティスへ入社後、webデザイナーとして大学サイトや病院サイト、企業サイト等のデザイン・コーディングに携わる。資格：Photoshopクリエイター能力認定試験スタンダード、illustratorクリエイター能力認定試験エキスパート、Webクリエイター能力認定試験初級

この執筆者の最新記事

この執筆者の記事一覧

• 2024年3月25日WEBGoogle Chromeのデベロッパーツールでリアルタイム修正をしよう（HTML・CSS編）
• 2023年12月29日WEB【CSS】max-width、min-widthの活用方法と実用的なwidthの指定パターン
• 2023年10月26日WEB【CSS】displayプロパティの2値構文ってなに？新しい記述方法について解説！
• 2023年8月30日WEB【初心者向け】フレックスボックスとは？display:flexの使い方（応用編）