はじめに
タイトルについて記事にしました。
この記事で得る内容は以下の通りです。
・ Sassでeach文を使って効率よく修正・変更をする方法
例
例えば、以下のようなSNSで共有する項目があったとします
index.haml
%button.twitter twitterで呟く
%button.facebook facebookで共有する
%button.line LINEで開く
配列の定義
$変数名: ('文字列A', '文字列B', '文字列C');のように記述します。
style.scss
$sns: ('twitter', 'facebook', 'line');
each文の定義
@each $eachで使う変数名 in $配列の変数名{}のように記述します。
each文は配列の文字列を順番に取り出して、文字列の数だけ処理を行います。
style.scss
@each $value in $sns {
}
連想配列の定義
今回は、twitter,facebook,lineそれぞれのボタンを、each文を使ってそれぞれに色をつけたいと思います。
まず、先程定義した変数$snsを連想配列を使い書き換えます。
style.scss
$sns: (
'twitter': #00aced,
'facebook': #305097,
'line': #5ae628
);
コロンの左側が$key、右側が$valueとなります。
画像のように$keyをクラス名にし、$valueをbackground-colorプロパティに当てます。
@eachの横に、$keyとカンマ区切りで$valueと書くとそれぞれを呼び出すことができます。
また、$keyと$valueの変数名も自由に決めることができます。
$keyの呼び出し方が少し特殊で、呼び出すには#{$key}と記述します。
この記述方法をインターポレーションといいます。
Sass - チュートリアルより引用
変数はプロパティの値に使えるだけではありません。
#{} で括ることによってプロパティ名やセレクタに使うこともできます:
style.scss
@each $key, $value in $sns {
button.#{$key} {
background-color: $value;
}
}
結果、それぞれ配列の$valueが順番に取り出されて、各ボタンにプロパティを適用することができました。
