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

[岡本紳吾，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