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

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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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