子孫セレクタをSassで書くにはネストで記述します。最近のCSSの書き方として、深い階層の子孫セレクターを使用した記述は敬遠される傾向にあります。そのためネストの恩恵は子孫セレクターよりも後述するメディアクエリなどの方が価値があるかもしれません。
Sassのファイルはscssの拡張子にしてKoalaを起動しておきます。設定内容は「Sassの導入（１）〜Sass」を参考にしてください。
必ず一番最初に「@charset “utf-8”;」などの文字コードの指定をしましょう。これがないと日本語のコメントアウトを記述するとコンパイル時にエラーがでます。
子孫セレクターを使用したHTMLの記述
簡単なヘッダーとナビのコードを例に説明します。HTMLコードは次のとおりです。
HTMLコード
<header>
<div class="header_inner">
<h1><img src="img/logo.png" alt="The Sample"></h1>
<nav>
<ul>
<li><a href="news.html">NEWS</a></li>
<li><a href="column.html">COLUMN</a></li>
<li><a href="gift.html">MENU</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
CSSの記述
HTMLがネストの構造になっていますので、CSSのセレクターも子孫セレクターを使用した旧来の方法で記述すると次のようになります。子供要素を表す 「>」 は必ずしも必要ではないかもしれませんが、Sassの色々なパターンの記述方法を見るために入れています。
子孫セレクターをそのまま階層どおりに記述すると長いセレクターを書かなければなりません。結構面倒な作業です。
header {
border-bottom: solid 1px #aaa;
background: white;
overflow: hidden;
box-shadow: 0px 0px 6px #aaa;
}
header > .header_inner {
width: 1000px;
margin: auto;
}
header > .header_inner h1 {
margin: 5px 0 0;
line-height: 1;
float: left;
}
header > .header_inner h1 img {
vertical-align: bottom;
height: 42px;
}
Sassの記述
Sassで上のCSSと同様の記述をするには、親のセレクターの中に入れ子状態でセレクターを書いていきます。
そうすることで何度も同じ要素を指定する必要がなくなりますし、入れ子状態の見通しが良くなるわけです。
この書き方を何度か簡単なサイトのCSSをSassの形式で書く練習をするとその良さがわかります。
もし、記述にミスがあればリアルタイムにコンパイルされますので、すぐにエラーメッセージが出て知らせてくれます。
また、子セレクター（>）を使用する場合は下のサンプルコード6行目のように「> .header_inner」のような書き出しで始めます。
また、隣接セレクター（＋）を使用する場合も同様に先頭に + を記述します。
Sassのコード
[sass]
header {
border-bottom: solid 1px #000;
background: white;
overflow: hidden;
box-shadow: 0px 0px 6px #000;
> .header_inner {
width: 1000px;
margin: auto;
h1 {
margin: 5px 0 0;
line-height: 1;
float: left;
img {
vertical-align: bottom;
height: 42px;
}
}
}
}
[/sass]
Koalaを起動しておけば自動でコンパイルされて希望する形態のCSSが吐き出されます。
Sassで書かれたサンプルコードは上の例のような子孫セレクターを使用したCSSの記述に変わり、新しいCSSファイルに書き出される仕組みです。
メディアクエリでの活用
Sassをメディアクエリで活用すると大変コーディングしやすくなります。
HTMLコードは上のサンプルコードと同じものです。
HTMLコード
<header>
<div class="header_inner">
<h1><img src="img/logo.png" alt="The Sample"></h1>
<nav>
<ul>
<li><a href="news.html">NEWS</a></li>
<li><a href="column.html">COLUMN</a></li>
<li><a href="gift.html">MENU</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
Sassでは、それぞれのセレクターごとにPC用、タブレット用、スマートフォン用と入れ子状態で記述することができるため、わかりやすく記述することができます。
このサンプルコードはPCではh1はフロートさせますが、680px未満の幅のデバイスではh1のフロートを解除します。
Sassコード
[sass]
header {
border-bottom: solid 1px $border-color;
background: white;
overflow: hidden;
box-shadow: 0px 0px 6px $border-color;
> #header_inner {
width: 1000px;
margin: auto;
h1 {
margin: 5px 0 0;
line-height: 1;
float: left;
@media screen and (max-width:680px){
float: none;
}
img {
vertical-align: bottom;
height: 42px;
}
}
}
}
[/sass]
コンパイル後は次のようなCSSとなります。
CSSコード
header {
border-bottom: solid 1px #aaa;
background: white;
overflow: hidden;
box-shadow: 0px 0px 6px #aaa;
}
header > #header_inner {
width: 1000px;
margin: auto;
}
header > #header_inner h1 {
margin: 5px 0 0;
line-height: 1;
float: left;
}
@media screen and (max-width: 680px) {
header > #header_inner h1 {
float: none;
}
}
header > #header_inner h1 img {
vertical-align: bottom;
height: 42px;
}
親セレクターの参照 「&」
「&」（アンパサンド）を使用すると親セレクターを参照することができます。具体的にはCSSシグネチャーを使いたいときや、疑似クラスを使うときに活用できます。ちょっと言葉では分かりにくいのでサンプルを見てみましょう。
CSSシグネチャとは、bodyタグにidやclassを付けて各ページごとにデザインを変更する手法のことをいいます。
今回のサンプルではh2要素の背景色がHomeページではグリーン、Aboutのページでは青、Accessのページでは赤に変更しています。各ページでh2の背景色を変更するには、それぞれのページのh2にクラス名を付ける方法と、bodyタグにidやclass名を付けてbodyを起点として子孫セレクターを使ってh2のデザインを変更するシグネチャといわれる方法があります。
HTMLコード
<body class="top">
<h1>Top</h1>
<div class="main">
<h2>Sample</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam doloremque, impedit et error odit architecto aspernatur, reiciendis minus quae? Dicta quam debitis qui, magni sequi? Explicabo at, in inventore saepe.</p>
</div>
</body>
CSSコード
.main {
width: 80vw;
margin: auto;
background-color: #F3FB87;
}
.main h2 {
color: #fff;
}
.top .main h2 {
background-color: #05640B;
}
.about .main h2 {
background-color: #1820B6;
}
.access .main h2 {
background-color: #B61D3E;
}
上のCSSをSassを用いて記述すると以下のコードのようになります。
.mainの中のh2をネスト形式で記述すると、シグネチャとしたいbodyのclassを指定できません。
そこで親セレクターにあたる.mainを&で表現することでネストした中でも「.top & h2」のような子孫セレクターを記述することができます。
Sassコード
[sass]
.main{
width:80vw;
margin:auto;
background-color: #F3FB87;
h2{
color:#fff;
}
.top & h2{
background-color: #05640B;
}
.about & h2{
background-color: #1820B6;
}
.access & h2{
background-color: #B61D3E;
}
}
[/sass]
疑似クラスで&を使う
&は疑似クラスを指定するときにも使用できます。
a要素の下線を付けたり外したりするCSSサンプルです。
CSSコード
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
これをSassで記述すると次のようになります。
[sass]
a{
text-decoration:none;
&:hover{
text-decoration:underline;
}
}
[/sass]
プロパティのネスト
ネストの記述はショートハンドで記述されるプロパティでも使用することができます。
次の例のような書き方をすると応用範囲が広くなります。
CSSコード
.main{
padding:0;
padding-top:25px;
padding-bottom:25px;
}
Sassコード
[sass]
.main{
padding:0 {
top:25px;
bottom:25px;
}
}
[/sass]
コメントを投稿するにはログインしてください。