SCSSでeach文（ループ処理）を使ってみる

2022.07.15

SCSS(SASS)でも条件分岐のif文と、ループ処理を行うfor文やeach文などを使うと、通常の記述では複数行にわたる処理を数行に抑えることができます。理解するのは少し難しいですが、理解できれば後からの修正・編集を効率よく行うことができます。
今回はeach文を使った例をご紹介します。
今回ご紹介するSCSSの記述とコンパイル後のソースの概要は下記のようになります。まず配列を設定し、配列の中身をeach文で取り出し、変数に代入。変数の値をクラス名として扱い「任意のCSS」を設定していきます。each文では配列の最初の値から、最後の値まで同様の処理を繰り返し行なっていきます。

//_SCSS
$【配列名】: 値01, 値02, 値03, ....;
@each $【変数名】 in $【配列名】 {
	.#{【変数名】} {
		~~~任意のcss~~~
	}
}

↓コンパイル後

//_CSS
.値01 {
  ~~~任意のcss~~~
}
.値02 {
  ~~~任意のcss~~~
}
.値03 {
  ~~~任意のcss~~~
}

私が実際の案件で使用した記述は下記のようになります。（一部省略）
ヘッダーナビのテキストリンクに対して、例えば「会社概要ページ」を閲覧中には、ヘッダナビの「会社概要」に下線を付加する処理を行っています。

//_HTML
<body class="about">
	<header>
		<nav>
			<a href="/about/">会社概要</a>
			<a href="/lineup/">商品一覧</a>
			<a href="/recruit/">採用情報</a>
		</nav>
	</header>
</body>


//_SCSS
body {
	//_配列でナビの項目数分をクラス名として宣言（ここではディレクトリ名と同じにする）
	$directories: about, lineup, recruit;
	
    //_「$directory」はeach文内で使用する変数、「$directories」は上記で宣言した配列名
	@each $directory in $directories {

        //_「&」はSCSSの親セレクタ継承。
        //_変数をセレクタ名の中で参照の際は「#{$【変数名】}」と記述
		&.#{$directory} a[href='/#{$directory}/'] {

            //_任意のcssプロパティを記述
		    border-bottom: solid 3px #000;
		}
	}
}


//_CSS（上記SCSSコンパイル後）
body.about a[href='/about/'] {
	border-bottom: solid 3px #000;
}

body.lineup a[href='/lineup/'] {
	border-bottom: solid 3px #000;
}

body.recruit a[href='/recruit/'] {
	border-bottom: solid 3px #000;
}

手順を説明しますと、各下層ページのHTMLのbodyタグに、そのディレクトリ名（上記では「about」）と同じclassを設定します。HTMLへの記述はこれだけです。
次にSCSSですが、配列を宣言し、各ディレクトリと同じ名前の要素を設定します。これはコンパイル後のクラス名にもなります。
@eachでeach文を開始します。
配列「$directories」の中を1つずつ「$directory」に代入してeach文内の処理を回します。
each文内の処理は変数を使用している部分以外は、ほぼいつも通りのSCSSの記述になります。
セレクタの指定方法で、「#{$directory}」と見慣れない記述がされています。「#{変数名}」の記述は、文字列変数をセレクタ名やコメント、文字列の中で参照する際はこの形式にする必要があります。
配列内の要素の値を使用する部分に「#{$directory}」を充てて、適用したいcssプロパティを記述して完了です。

まとめ

同じ仕様でも、要素の数が少ないと、コンパイル後のCSSをそのまま書いた方が早いし分かりやすいという方も多いかと思いますが、each文で効率化できるかも？と思った際にはぜひ使ってみてください。
if文やfor文など、他言語でなじみのある処理方法がSCSSで使えるものもありますので、他言語でプログラミング経験のある方は抵抗なく使いこなせるのではないでしょうか。

WEBプログラマー／ I.S

WEBサイト制作に関するお問い合わせはこちら

SCSSでeach文（ループ処理）を使ってみる

まとめ

関連