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

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

[岡本紳吾，hatte.Inc]

Sassの利点1：変数が使える

　Sassでは変数を利用できる。よく使う色、よく使うフォントセットなどをあらかじめ変数化しておき、それを自由に呼び出して利用できる。

　変数は、「$」の後に定義できる

$width:500px;
$color:#aa443f;
#maincontainer{
	width:$width;
	color:$color;
}

.scss

↓コンパイル

#maincontainer {
  width: 500 px;
  color: #aa443f;
}

.css

Sassの利点2：CSSの継承をネストでまとめられる

　CSSの継承はネストを用いて簡潔に記述できる。

#main{
	background-color:#000;
	.content{
		background-color:#aaa;
		color:#000;
		.sidebar{
			padding:10px;
		}
	}
}

.scss

↓コンパイル

#main {
  background-color: black;
}
#main .content {
  background-color: #aaaaaa;
  color: black;
}
#main .content .sidebar {
  padding: 10px;
}

.css

Sassの利点3：ネームスペースでネストできる

　同一のネームスペースを持つプロパティは、ネームスペースでネストできる。

.fontnest{
	font:{
		family:family;
		size:1.2em;
		color:#fff;
	}
}

.scss

↓コンパイル

.fontnest {
  font-family: family;
  font-size: 1.2em;
  font-color: white;
}

.css

Sassの利点4：インポートでCSSファイルを1つにまとめられる

　SassではCSSのように「@import」が利用できる。CSSとSassの決定的違いとして、Sassは最終的に生成されるCSSファイルが1つだけになるという利点があるのだ。

　CSSを書く場合でも全体で使い回すCSSと特定ページで使うCSSなど、幾つかのファイルに分割して作ることが多い。ところが、そうすることでHTTPリクエストの数が増えてしまう。

　Sassではファイルを分割して作成していても、@importを利用することで最終的なファイルを1つにまとめることができ、サーバーの負荷を軽減できるのだ。

Sassの利点5：ミックスインとインクルードでスタイルを使い回せる

　Sassのミックスインは、あるまとまったスタイルを変数のようにパッケージしておき、自由に呼び出して利用できる機能だ。スタイルシートのテンプレート機能といえるだろう。変数の場合は単一の値を扱っていたが、ミックスインは単一もしくは複数のスタイルを扱う。

　定義は=（SASS記法）か@mixin（SCSS記法）で行って、呼び出しは+（SASS記法）か@include（SCSS記法）を使う。

@mixin maintext {
	font:{
		family: Arial;
		size: 20px;
		weight: bold;
	}
	color: #ff0000;
}
.mainmix{
	@include maintext;
	background-color:#fff;
}

.scss

↓コンパイル

.mainmix {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  background-color: #fff;
}

.css

Sassの利点6：ミックスインでは引数も使える

　また、ミックスインでは、変数を引数に使うことができる。

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	-o-border-radius: $radius;
	border-radius: $radius;
}
.box { @include border-radius(10px); }

.scss

↓コンパイル

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.css

Sassの利点7：算術演算子で値の加減乗除ができる

　Sassでは、+、-、*、/、%を使った、値の演算が可能だ。数値はもちろん、色までも演算できるので、「ここ、もうちょっと黒く」なんていうことをGUIナシで試行できる。「ここ、もうちょっと黒く」をSass的に表現するなら、こんな感じだ。

.coloradd{
	color:#ff44aa - #555;
}

.sass

↓コンパイル

.coloradd {
  color: #aa0055;
}

.css

Sassの利点8：別の単位同士で演算できる

　また、別の単位同士で演算することもできる。

.widthadd{
	width:40px + 2in;
}

.scss

↓コンパイル

.widthadd {
  width: 232px;
}

.css