はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

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");
}

広告を非表示にする