CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（3/3 ページ）

» 2014年02月17日 18時00分公開

Sassの利点9：条件分岐や繰り返し処理ができる

　さらに条件分岐や繰り返し処理をすることもできる。これには頭に「@」を付けた命令文を記述して、JavaScriptなどのように比較演算子などを記述する。

　特に繰り返し文は、メニューなどでそれぞれ違ったIDなどを持った要素にCSSを設定したいといったときに威力を発揮する。

@if

$type: moge;
p {
  @if $type == hoge{
    color: blue;
  } @else if $type == huga{
    color: red;
  } @else if $type == move{
    color: green;
  } @else {
    color: black;
  }
}

.scss

↓コンパイル

p {
  color: green;
}

.css

@for

@for $i from 1 through 5 {
	.nav-#{$i} { width: 2em * $i; }
}

.scss

↓コンパイル

.nav-1 {
  width: 2em;
}
.nav-2 {
  width: 4em;
}
.nav-3 {
  width: 6em;
}
.nav-4 {
  width: 8em;
}
.nav-5 {
  width: 10em;
}

.css

@each

@each $str hoge, huga, moge, moga{
	.#{$str }-name{
		background-image: url('/images/#{$str}.png');
	}
}

.scss

↓コンパイル

.hoge-name {
  background-image: url("/images/hoge.png");
}
.huga-name {
  background-image: url("/images/huga.png");
}
.moge-name {
  background-image: url("/images/moge.png");
}
.moga-name {
  background-image: url("/images/moga.png");
}

.css

@while

$i: 1;
@while $i < 5 {
	.item-#{$i} { width: 2em * $i; }
	$i: $i + 1;
}

.scss

↓コンパイル

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}
.item-4 {
  width: 8em;
}

.css

Sassの利点10：コンパイルオプションで変換の仕方を変えられる

　SassでCSSをコンパイルする際、オプションを幾つか設定できる。オプションによって、可読率と圧縮率（実行速度）がトレードオフになるので、コーディング／デバッグ時と実行時で使い分ける必要があるだろう。変換の仕方を変える4つの各オプションは以下の通り、変換されたCSSを見比べてほしい。

:nestedを使った場合

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }
.content{
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

.css

:expandedを使った場合

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
.content{
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

.css

:compactを使った場合

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

.css

:compressedを使った場合

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

.css

　ファイルサイズを極限まで削減したい場合は、「:compressed」を利用したい。

次回は、環境構築してSassを使いこなして爆捗！

　本稿で紹介し切れていないSassの機能もまだまだ存在する。しかし、ここで紹介した機能だけでも相当強力であることが分かるはずだ。さらなるSassの機能については、公式リファレンスを参考にしてほしい。

　次回はSassの環境構築とDreamweaverでSassを利用する方法について紹介する。

サンプルのダウンロード

　本稿で紹介したscssファイルと変換したcssファイルを、GitHubに置いておいたので、どのように展開されているかを確認してみてほしい。本連載で作成したサンプルのコードやファイルは全てGitHubからダウンロードできる。

「次回」へ

「爆捗！ WordPressテーマ作成ショートカット」バックナンバー

岡本紳吾（おかもとしんご）

1975年大阪生まれ。2000年ごろよりAdobe Flash（当時はmacromedia）を使ったコンテンツ制作を始め、Flash歴だけは異様に長い。自他共に認めるFlash大好きっ子。2008年より活動の拠点を東京に移し、2011年に独立。最近はAdobe Edge系を活用し、HTML5コンテンツも手掛ける。Webプロデュースと制作と山岳メディア運営の会社、hatte Inc.代表取締役。Twitter：@hage、Facebook：shingo.okamoto