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

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

[岡本紳吾,hatte.Inc]
前のページへ 1|2|3       

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からダウンロードできる


岡本 紳吾(おかもと しんご)

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


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。