検索
連載

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

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。

Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

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


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る