Sassで&による親セレクタ参照

このエントリーをはてなブックマークに追加

ネタ元:第3回 LESS記法について(中級編:ネストの応用):LESSで3倍ラクするスマートフォンコーディング|gihyo.jp … 技術評論社

この記事を読んでSassで今までこれ知らなくて損してたわーと思った機能があったのでご紹介。ネタ元はLESSですがSassでも問題なく利用できます。

基本的な親セレクタ参照

Sassでは&を利用することで親のセレクタを参照することができます。例えば以下のように記述すると。

a{
	color:red
	&:hover{
		color:blue;
	}
}

次のようなCSSが書き出されます。

a{
	color:red
}
a:hover{
	color:blue;
}

このように&の箇所が親のセレクタに置き換わりCSSが生成されます。

親セレクタ参照の応用

&の前にセレクタを記述することも可能です。例えばIE6だけちょっと表示を変えたい場合は&の前に「* html」と追加するだけでIE6用のCSSハックが利用できるようになります。

.foo{
	width:100%;
	* html &{
		width:99%;
	}
}

これは、次のようなCSSが生成されます。

.foo{
	width:100%;
}
* html .foo{
	width:99%;
}

&の前にセレクタを記述することができると知らずに、これまでネスト外に記述すると手間のかかる事をやっていましたので、社内にあるWeb制作者のためのSassの教科書を読みながらSassの復習中です。結構知らないことがのっていて勉強になります。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

関連エントリー

Compassで書き出すCSSファイルを軽量化する
Source MapでSass/Compassを簡単にCSSをデバッグする
Google ChromeでCSSがSassの何行目に記述されているか確認する方法
CodeKitで簡単にCSS Preprocessorを利用する!
CompassでCSSスプライト

スポンサードリンク

«CSS Nite in SAPPORO, Vol.11 「実践! スマートフォン対応サイト制作」に出演します | メイン | iOSにおけるviewportの指定方法による細かい違い»

このエントリーのトラックバックURL
コメントを投稿