【Sass】Sassの基本を学ぼう
はじめに
どうも、NNCの石上です。
前回に続けてSassについて学習していきましょう。今回は、Sassのごく基本的な機能を確認していきましょう。
ネスト
まずは一番よく使われる機能である「ネスト」からみていきましょう。Sassでは、親子関係にあるセレクタをネスト（入れ子）にして記述することができます。例えば、以下のようなHTML/CSSがあるとしましょう。
<div class="test">
<h2>見出し</h2>
<p>テキスト</p>
</div>.test {
margin: 20px;
}
.test h2 {
border-bottom: solid #333 2px;
font-size: 14px;
}
.test p {
font-size: 20px;
color: #ff0000;
}「.test」内の要素にスタイルを指定するために、毎回「.test」をセレクタに記述しています。コピペで済むものではありますが、そもそもそのコピペが面倒だったりしますし、サイトのボリュームが大きくなればかなりの労力を要します。
このCSSをSassで記述すると、以下のような形になります。
.test {
margin: 20px;
h2 {
border-bottom: solid #333 2px;
font-size: 14px;
}
p {
font-size: 20px;
color: #ff0000;
}
}同じセレクタを何度も書く手間から解放されましたね。加えて、インデントによってHTMLの構造と同じ見た目になるため、階層構造を容易に把握することができます。サイトが大規模になればなるほど記述量が減り、管理や更新もやりやすくなります。
ただし、以下のようにネストを深くしすぎると逆に見辛いコードになってしまいますので、注意が必要です。
.section {
.list {
.item {
div {
p {
span {
font-size: 10px;
}
}
}
}
}
}& -アンパサンド-
ネストを用いて記述する際、「&(アンパサンド)」を使うと親セレクタを参照することができます。
仮に、「#item」に対してスタイルを指定したいが、特定のクラスの中に記述されている時だけスタイルを変更したいとしましょう。
<div id="item"></div>
<div class="current">
<div id="item"></div>
</div>ネストの基本形でも間違いではないですが、やはり記述量が増えていますし視認性も優れているとは言えません。そこで「&」を使ってあげると、コードが簡潔にまとまって読みやすくなりましたね。
// ネストの基本形
#item {
width: 300px;
}
div.current {
#item {
width: 240px;
}
}
// &を用いた形式
#item {
width: 240px;
div.current & {
width: 300px;
}
}また、こちらは擬似セレクタや擬似要素にも用いることができます。以下の例では、「li:first-of-type」「li::before」を&を用いて指定しています。大変便利ですので、ぜひ習得しておきましょう。
li {
&:first-of-type {
margin-top: 0;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
}
}変数
変数を定義することで、任意の場所で値を使いまわすことができるようになります。カラーコードやフォントの名前を定義して用いることが多いです。
例えば、サイトのメインカラーである赤を複数のセレクタに適用したいとしましょう。次のように記述することができます。
$red: #ff0000;
.test {
margin: 20px;
p {
font-size: 20px;
color: $red;
}
}
.main {
background-color: $red;
}
.head {
border-color: $red;
border-width: 2px;
border-style: solid;
}$に続けて変数名を設定し、「:(コロン)」の後に値を指定することで変数を定義することができます。あらかじめカラーコードを変数として定義しておくことで、これ以降好きな場所でそのカラーコードを参照することができるようになりました。
例えば明度・彩度の微調整が入ってメインカラーが変わったとしても、「$red」の値さえ変えてしまえば、それを引用している複数箇所の値を一括で変更することになりますので、コピペの手間だけでなく管理性の面から見ても抜群にやりやすくなります。
@extend -エクステンド-
特定のセレクタのスタイルを継承することができます。この機能を「@extend (エクステンド)」と呼びます。
例えば以下のように書くと、「.card」に指定されたスタイルが「.item」にも適用されることになります。コンパイル後のCSSを見ると、2つのセレクタがグループ化されているのがわかると思います。共通のスタイルが複数出てくる、と言うシチュエーションであれば、エクステンドでどんどん継承させて効率化しましょう。
.card {
position: relative;
width: 200px;
border: 1px solid #333;
}
.item {
@extend .card;
font-size: 20px;
}.card, .item {
position: relative;
width: 200px;
border: 1px solid #333;
}
.item {
font-size: 20px;
}@mixin -ミックスイン-
スタイルを定義して任意の場所で引用することができます。この機能を「@mixin(ミックスイン)」と呼びます。
以下のようにあらかじめミックスインを定義しておいて、「@include ミックスイン名;」で呼び出します。
@mixin box {
padding: 10px;
color: #fff;
background-color: #333;
}
.mix {
@include box;
}.mix {
padding: 10px;
color: #fff;
background-color: #333;
}これだけだとエクステンドとの違いが分かりにくいと思うのですが、ミックスイン特有の機能として「引数」を使うことができます。引数はプログラミングにおいて「命令を実行する際に引き渡す値」となります。異なる値を引き渡し、同一のミックスインで異なる結果を表現することができるようになります。
ミックスイン名の直後に()を書いて、その括弧の中に引数を書きます。
@mixin box($value) {
padding: 10px;
color: #fff;
background-color: $value;
}
.mix01 {
@include box(#ff0000);
}
.mix02 {
@include box(#555);
}.mix01 {
padding: 10px;
color: #fff;
background-color: #ff0000;
}
.mix02 {
padding: 10px;
color: #fff;
background-color: #555;
}同じミックスインを参照しているものの、「background-color」の値だけが異なっています。このように、基本的には同じスタイルであるものの値の一部だけを自由に変えて使い回すことができるのが、ミックスインの最大の特徴になります。
次回はSassの実践的なテクニックについてお話ししたいと思います。
