Sass の基本操作2（条件分岐、繰り返し、リスト）
Sass の基本操作2（条件分岐、繰り返し、リスト）
Sassでは、一般的プログラミング言語にあるような 条件分岐、繰り返し、リストを扱うことができます。
@if（条件分岐）
@if, @else で一般的なプログラミング言語のような条件分岐を行える。 比較演算子も、== != < > <= >= のような、よく使われるものが使われる。
Sass
$debugMode: true;
#main {
@if $debugMode == true{
color: red;
} @else{
color: green;
}
}
CSS
#main {
color: red;
}
@for（繰り返し）
Sass では、for文も使えます。 @for $variable from x0 through x1 と書くと、x0 から x1までforループします。
Sass
@for $i from 10 through 14 {
.fs#{$i} { font-size: #{$i}px;}
}
CSS
.fs10 {
font-size: 10px;
}
.fs11 {
font-size: 11px;
}
.fs12 {
font-size: 12px;
}
.fs13 {
font-size: 13px;
}
.fs14 {
font-size: 14px;
}
@while（繰り返し）
while文も使えます。
Sass
$j: 10;
@while $j <= 14 {
.bs#{$j} { background-size: #{$j}px; }
$j: $j + 1;
}
CSS
.bs10 {
background-size: 10px;
}
.bs11 {
background-size: 11px;
}
.bs12 {
background-size: 12px;
}
.bs13 {
background-size: 13px;
}
.bs14 {
background-size: 14px;
}
リストと@each
変数はリストも扱える。 each $l in $list で順番にアクセスできる。
Sass
$animals: cat, dog, tiger;
@each $animal in $animals {
.#{$animal}-icon {
background: url('#{$animal}.png');
}
}
CSS
.cat-icon {
background: url("cat.png");
}
.dog-icon {
background: url("dog.png");
}
.tiger-icon {
background: url("tiger.png");
}
また、変数（リスト）を使わなくてもeachは扱える。
@each $cat in american, mantican, mike {
.#{$cat}-icon {
background: url('#{$cat}.png');
}
}
CSS
.american-icon {
background: url("american.png");
}
.mantican-icon {
background: url("mantican.png");
}
.mike-icon {
background: url("mike.png");
}
参考リンク