グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



【Sass実践編】Sassの条件分岐と繰り返し処理とは?Sassでの制御構文の書き方を紹介!

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

制御構文とは

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

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

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

@ifを使った条件分岐

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

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

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

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

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

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

比較演算子 説明
A==B AとBは等しい
A>B AはBより大きい
A<B AはBより小さい
A>=B AはB以上
A<=B AはB以下
A!=B AとBは等しくない

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

論理演算子 説明
and かつ
or または
not 否定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごに

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

The following two tabs change content below.

加藤 陵二

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

FOLLOW US

最新の情報をお届けします