自分なりのSASSの使い方(mixin、extendなど)をメモってみた

パーシャルでファイル管理

sassの特権であるpartial(パーシャル)を用いて、ファイルを用途別に管理します。partialはファイル名の先頭に「_」をつけることで利用できます。

主な分け方は以下のような感じです。

NAVERさんとかだと、mixinファイルをさらに細かく分割してるみたいですが、
そこまでライブラリを多彩にしていないのでとりあえず一つで事足りてます。

利用したいscssファイルに「@import」で記述することで、読み込みできます。
自分の場合は「_import.scss」にimportの記述をまとめておき、各scssファイルには以下のように記述しています。

@import '_import';

こうすることで、あとで@importするファイルが増減しても一括で対応できるようにしています。
まあこのあたりはcssの通常のimportと同じ管理方法です。

機能の使い分け

スコープのネストと参照

.hoge {
	a {
		color: #00f;
		&:hover {
			text-decoration: underline;
		}
	}
}

//展開時
.hoge a {
	color: #00f;
}
.hoge a:hover {
	text-decoration: underline;
}

こんな感じで、クラスのスコープを毎回記述する必要がなくなります。
また、「&」を用いることで、親要素のタグを参照できます。

mixin(ミックスイン)の記述

@mixin hoge($hoge){
	min-height: $hoge;
	_height: auto !important;
	_height: $hoge;
}

//記述時
.class {
	@include hoge(100px);
}
//展開後
.class {
	min-height: 100px;
	_height: auto !important;
	_height: 100px;
}

mixinはそれ自体はcssに出力されない上に、変数で値を操作できます。

mixinは「ここを○○にしたい！」等の決まった記述をする際に
記述内容をまとめておき、変数で値を操作して吐き出すときに使います。
ex : min-heightのIE対応、SS3の複雑な記述の簡略化など

css3なんかcompassにmixinライブラリがあるので、そちらを使うと楽です。
追加で自分用のmixinをまとめられれば、効率はかなり上がります。

extend(エクステンド)の記述

.fuga {
	float: left;
	margin-right: 20px;
}

//記述時
.hogera {
	@extend .fuga;
}
//展開時
.fuga,
.hogera {
	float: left;
	margin-right: 20px;
}

extendはある程度決まったスタイルを、ベースとなるモジュールクラスとして作成し、
そのクラスを記述量を極力抑えて適応させ、一部をカスタムしたいときに使います。

「.hoge」という普通のクラスと同様に記述すると、それ自体がクラスとして出力されます。
それ自体をクラスとして出力させたい場合は「.」を「%」に置き換えて「%hoge」と記述すれば対応できます。

よく使うモジュール等はextendで管理しています。

リストと条件文の利用

sassはプログラミングにあるいわゆる配列、条件分岐、論理値等が使えます。
もともといくつかモジュールがまとまっています。

Module: Sass::Script::Functions

クラスの連番でスタイルを適応するとき、cssスプライトで値をごりごり操作するとき、
なんかによく使います。一例は以下のようなやつです。

ex : グローバルナビのcssスプライト

//リスト(配列)を作る「,」で区切る
$catList : Top, About, Service, Contact;

#gNav {
	@for $i from 1 through length($catList){
		li.nav#{nth($catList,$i)} a {
			background-position: 0px #{-50 * $i}px;
		}
		li.nav#{nth($catList,$i)} a:hover {
			background-position: -50px #{-50 * $i}px;
		}
	}
}

つかった関数は以下の2つです。

上記の記述を展開すると以下のようになります。

#gNav li.navTop a {
	background-position: 0px -50px;
}
#gNav li.navTop a:hover {
	background-position: -50px -50px;
}
#gNav li.navAbout a {
	background-position: 0px -100px;
}
#gNav li.navAbout a:hover {
	background-position: -50px -100px;
}
#gNav li.navService a {
	background-position: 0px -150px;
}
#gNav li.navService a:hover {
	background-position: -50px -150px;
}
#gNav li.navContact a {
	background-position: 0px -200px;
}
#gNav li.navContact a:hover {
	background-position: -50px -200px;
}

こんな感じで、うまく使うとめっちゃ便利です。
16進数のカラーコードの数値変換にも使えるので、
CSS3のグラデーションの変化にも応用できますし、
トランジションの数値の調整にも使えそうです。