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

新規でcssを書く際はsassを使っているのですが、mixin、extend、パーシャルでのファイル管理など、自分なりの使い方等をざっくりメモってみました。

【スポンサーリンク】

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

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

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

_util.scss サイト全体に関わる変数や設定値をまとめる
_mixin.scss mixinをまとめる
_import.scss 上記scssファイルのimportを一括で管理する

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つです。

length($list) リストの要素数を取得
nth($list, XX) リストのXX番目の要素を取得

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

#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のグラデーションの変化にも応用できますし、
トランジションの数値の調整にも使えそうです。

この記事についたタグ
この記事を書いた人
ねづ
『NEZU.log』運営管理者。Webエンジニアの傍ら、趣味でこのブログを運営。シェアハウス在住。2015年は海外情報(主にアジア圏)と効率のよい生活の情報発信がテーマ。
この記事が面白かったらいいねしよう!
記事のタイトルとURLをコピーするコピーしました!
こちらの記事もどうぞ
こちらの記事もどうぞ

コメントを残す

コメント※必須
名前※必須
メールアドレス※必須(非公開)

自分なりのSASSの使い方(mixin、extendなど)をメモってみた
このブログを書いている人

運営者 : ねづ

主にWebの企画、開発の仕事をしています。
海外が好きで、仕事、旅行問わずよく行きます。
フィリピン(セブ)で10週間留学後、現在はカナダ(バンクーバー)に滞在。留学、海外生活や旅行記をこのブログで書いています。

詳しいプロフィールはこちら

LINE@作成しました!お気軽にどうぞ!
友達登録は下記QRコードを読み取ってください
LINE@ QRコード

カテゴリ一覧
キーワードで記事を探す
下記から更新情報を受け取れます!