繰り返し文・条件分岐を使ってラクしてSassを書いてみよう！

はじめに

今回はSassの記述方法の一つである、繰り返し文・条件分岐文についてご紹介します。

Sassには繰り返し処理（for文・while文）や条件分岐（if文）といった機能が備わっており、
プログラミングっぽくにStyleを書くことができます。これにより、今まで何行もかかっていたStyleが数行で書くことができたりなど、Sassのコーディングを簡単にすることができます。実際にコードを書きながら勉強していきましょう。

繰り返し文（for文・while文）

繰り返し文は似たようなStyleをたくさん用意するときに効果的な記法です。for文とwhile文の２種類の書き方があります。

Sass

@for $i from 1 through 5 {
   .mt#{$i*10} { margin-top:#{$i*10}px; }
}

CSS

.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }

処理としては変数$iが1から5まで増加し、その中で1増加するごとにカッコ内のStyleを吐き出す仕組みになっています。

Sass

$i:1;
@while $i <= 5 {
  .mt#{$i*10}{
    margin-top:#{$i*10}px;
  }
  $i:$i+1;
}

(吐き出されるCSSは上のfor文と同じです)

こちらも処理としてはfor文と同じで$iは1から5まで増加し、その中で1増加するごとにカッコ内のStyleを吐き出す仕組みになっています。
for文との違いは最初に変数独立して指定している点、括弧内で$iを増加させる処理を書いている点が違います。

for文とwhile文の使い分けは見てもわかるようにfor文の方が短くて済むので簡単な繰り返し文だったらfor文・それよりも複雑な繰り返しが必要な時はwhile文と使い分けるのがいいと思います。

条件分岐文（if文）

特定のclassには別のstyleを付与したいなど、分岐して考えることが必要なときに使います。

Sass

$i:20;
@if $i == 20 {
   .style#{$i} { margin-top:#{$i}px; }
}@else{
   .style#{$i} { margin-bottom:#{$i}px }
}

CSS

.style20 { margin-top:20px; }

こちらの例は先に指定した変数$iが20かどうかを判断し、20ならmargin-topを、それ以外ならmargin-topを返す仕組みになっています。

これらの組み合わせ

繰り返し文と条件分岐文は組み合わせて使用することが多いです。一例をあげておきます。
Sass

@for$i from 1 through 20 {
  @if $i < 10 {
    .style#{$i} {
      width:#{$i}px;
      background-color:blue;
    }
  }@else {
    .style#{$i} {
      width:#{$i}px;
      background-color:red;
    }
  }
} 

CSS

.style1 { width: 1px; background-color: blue; }
.style2 { width: 2px; background-color: blue; }
.style3 { width: 3px; background-color: blue; }
.style4 { width: 4px; background-color: blue; }
.style5 { width: 5px; background-color: blue; }
.style6 { width: 6px; background-color: blue; }
.style7 { width: 7px; background-color: blue; }
.style8 { width: 8px; background-color: blue; }
.style9 { width: 9px; background-color: blue; }
.style10 { width: 10px; background-color: red; }
.style11 { width: 11px; background-color: red; }
.style12 { width: 12px; background-color: red; }
.style13 { width: 13px; background-color: red; }
.style14 { width: 14px; background-color: red; }
.style15 { width: 15px; background-color: red; }
.style16 { width: 16px; background-color: red; }
.style17 { width: 17px; background-color: red; }
.style18 { width: 18px; background-color: red; }
.style19 { width: 19px; background-color: red; }
.style20 { width: 20px; background-color: red; }

処理としては$iが10以下の時は青、それ以外は赤という条件分岐と、 それを繰り返し行う繰り返し処理を組み合わせています。それにより、1から20までのStyleを繰り返し、そのうちの10以下は青、それ以外は赤といった複雑な処理も可能です。

CSSでかくと20行するStyleもSassの繰り返し文・条件分岐文を使うと少ない行数ですみます

まとめ

このようにうまく繰り返し文や条件分岐文を使うことで今までたくさん書いていたCSSのコーディングを少なくて済ませることができるのでおすすめです。使って見てはいかがでしょうか