REDLINE MAGAZINE | Sassの勉強 #08　制御構文(条件分岐・繰り返し)

Sassで使える制御構文

使えるのは以下の4つです。これらを使用してよりプログラミングっぽい書き方ができるようになります。jsやPHP等に触れる機会も多いと思いますが、だいたい同じような書き方で使えます。

• @if（条件分岐）
• @for（繰り返し）
• @while（繰り返し）
• @each（繰り返し）

@if(条件分岐)

「もし～なら」という条件分岐の際に使用する「@if」。Sassの場合は頭に「@」がつきます。

@if(条件分岐)の書き方

@if 条件{
	・・・
}

「@else」や「@else if」を使ってさらに条件を増やすことができます。

@if 条件1{
		・・・
	}@else if 条件2{
		・・・
	}@else{
		・・・
}

簡単なサンプル。$ifTestの値に対してスタイルを振り分ける例。$ifTestの値が1ならcolorはred、値が2ならblue、それ以外ならgreenとなる。

$ifTest: 1;

#sample{
	@if $ifTest == 1{
		color:red;
	}@else if $ifTest == 2{
		color:blue;
	}@else{
		color:green;
	}
}

/* コンパイル後 */
#sample {
  color: red;
}

勿論ミックスインの中などでも使えるので、より柔軟にスタイルの指定が可能となる。@if文で使える比較演算子と論理演算子は以下の通り。

@if文で使える比較演算子と論理演算子

• 「==」等しい　[$a == $b … $a が $b に等しい時に TRUE。]
• 「!=」 等しくない　[$a != $b … $a が $b に等しくない場合に TRUE。]
• 「<」より少ない(小なり)　[$a < $b … $a が $b より少ない時に TRUE。]
• 「>」より多い(大なり)　[$a > $b … $a が $b より多い時に TRUE。]
• 「<=」より少ないか等しい(以下) 　[$a <= $b … $a が $b より少ないか等しい時に TRUE。]
• 「>=」より多いか等しい(以上)　[$a >= $b … $a が $b より多いか等しい時に TRUE。]
• 「and」かつ　[$a and $b … $a および $b が共に TRUE の場合に TRUE。]
• 「or」または　[$a or $b … $a または $b のどちらかが TRUE の場合に TRUE。]
• 「not」否定　[not $a … $a が TRUE でない場合 TRUE。]

@for(繰り返し)

条件下で1つずつカウントアップしながら繰り返し処理する「@for」。構文の書き方は２通りある。

@for(繰り返し)の書き方

//書き方 その1
@for $変数名 from 開始値 through 終了値{
    ・・・
}

//書き方 その2
@for $変数名 from 開始値 to 終了値{
    ・・・
}

ソースの違いは開始値と終了値の間に「through」を使うか「to」を使うか。「through」と「to」では、処理を終了する数値(回数)が変わる。「through」を使用した場合、指定した数値を含んで繰り返し、「to」を使用した場合、指定した数値を含まずに繰り返し。それがこの2つの書き方の違い。

「through」を使用したサンプル。「through 3」としているので指定した数値を含む回数＝3回分の処理が行われる。

// throughを使用した書き方
@for $i from 1 through 3{
	.test-#{$i}{
		margin-bottom:1px * $i;
	}
}

/* コンパイル後 */
.test-1 {
  margin-bottom: 1px;
}

.test-2 {
  margin-bottom: 2px;
}

.test-3 {
  margin-bottom: 3px;
}

次に「to」を使用したサンプル。「to 3」としているので指定した数値を含まず、2回分の処理が行われる。

// toを使用した書き方
@for $i from 1 to 3{
	.test-#{$i}{
		margin-bottom:1px * $i;
	}
}

/* コンパイル後 */
.test-1 {
  margin-bottom: 1px;
}

.test-2 {
  margin-bottom: 2px;
}

@while(繰り返し)

条件にあてはまる間ずっと繰り返し処理を行う「@while」。
「@while」は「@for」よりももう少し複雑な繰り返し処理が可能。「@for」が1ずつ増えていくのに対して、こちらは増やし方、減らし方も自分で指定出来ます。

@while(繰り返し)の書き方

@while 条件{
    ・・・
}

下記は変数「$i」に8を代入しておいて、処理を繰り返すごとに「$i -2」する、それが0になるまで繰り返す、というサンプル。

$i: 8;
@while $i > 0{
  .test-#{$i}{ width: 2em * $i; }
  $i: $i - 2;
}

/* コンパイル後 */
.test-8 {
  width: 16em;
}

.test-6 {
  width: 12em;
}

.test-4 {
  width: 8em;
}

.test-2 {
  width: 4em;
}

下記は@forでも@whileでもいいのだけれども、例えば背景画像を使ったナビゲーションなんかで要素ごとに背景画像をズラしてhover時の表示を変えたい時にこんな書き方すると分かりやすいし楽だなっていうサンプル。

$menu: 1;
@while $menu < 7{
	li#menu0#{$menu} a:hover{background-position:-150px * $menu -60px}
	$menu: $menu + 1;
}

/* コンパイル後 */
li#menu01 a:hover {
  background-position: -150px -60px;
}

li#menu02 a:hover {
  background-position: -300px -60px;
}

li#menu03 a:hover {
  background-position: -450px -60px;
}

li#menu04 a:hover {
  background-position: -600px -60px;
}

li#menu05 a:hover {
  background-position: -750px -60px;
}

li#menu06 a:hover {
  background-position: -900px -60px;
}

@each(繰り返し)

指定したリストが存在する間ずっと繰り返し処理を行う「@each」。

@each(繰り返し)の書き方

@each $変数名 in リスト{
    ・・・
}

リストは変数に「,(カンマ)」区切りで代入しておく。(スペース区切りでも良い)

下記はすごくすごくシンプルな例ですが、変数に入れたリスト分繰り返し処理が行われているのが確認できる。

$classList: classA, classB, classC, classD;

@each $test in $classList{
	.test-#{$test}{
		width:100%;
	}
}

/* コンパイル後 */
.test-classA {
  width: 100%;
}

.test-classB {
  width: 100%;
}

.test-classC {
  width: 100%;
}

.test-classD {
  width: 100%;
}

body要素にページ毎にidを振り分けてある状況で、「@each」を使って各h1.categoryTitleの背景画像を指定するサンプル。

$pageID: index, product, company, inquiry;

@each $page in $pageID{
	body##{$page} h1.categoryTitle{
		background:url(img/title_#{$page}.png);
	}
}

/* コンパイル後 */
body#index h1.categoryTitle {
  background: url(img/title_index.png);
}

body#product h1.categoryTitle {
  background: url(img/title_product.png);
}

body#company h1.categoryTitle {
  background: url(img/title_company.png);
}

body#inquiry h1.categoryTitle {
  background: url(img/title_inquiry.png);
}

ページが増えた場合にも、リストの中身を増やすだけで簡単にCSS側に出力される。

Sassの勉強　関連記事

• Sassの勉強 #00　もっかい最初からやり直そうSassの巻
• Sassの勉強 #01　Sassとは何か？～環境構築
• Sassの勉強 #02　Sassの基本的な機能「ネスト」
• Sassの勉強 #03　Sassの基本的な機能「変数」
• Sassの勉強 #04　Sassの基本的な機能「演算」
• Sassの勉強 #05　Sassの基本的な機能「@import」
• Sassの勉強 #06　スタイルの継承ができる「@extend」
• Sassの勉強 #07　柔軟なスタイル定義が出来る「@mixin」
• Sassの勉強 #08　制御構文(条件分岐・繰り返し)
• Sassの勉強 #09　@at-root
• Sassの勉強 #10　Sassの勉強 #10　関数一覧(Ver.3.4) と自作関数