Dart Sassを使う上で1番基本的なネストやアンパサンドの書き方｜Dart Sass入門
Sassの前提知識
Sassは「Syntactically Awesome StyleSheet」の略で、直訳すると「構文的に素晴らしいスタイルシート」になります。
下記のような機能が使えて、最終的にSassをコンパイル（変換）してCSSにすることで、ブラウザでも問題なく読み込めて、なおかつ便利な機能が使えます。
- CSSを入れ子にできるネスト機能
- 変数機能（Sassが登場した当時はCSSの変数機能もまだ存在していなかった）
- mixinやextendなど、よく使う記述一式をグループ化して利用できる
これらの機能を使うことで、記述量を減らしたり、CSSの管理がしやすくなります。
現在はDart Sassが主流
Sassにもいろいろ種類がありますが、2022年現在は「Dart Sass」と呼ばれるものが主流になっています。
それ以外の種類については過去にまとめているので、ぜひそちらの記事をご覧ください。
Sassのコンパイル方法
ブラウザはSassを直接読み込めないので、最終的にCSSにコンパイルする必要があります。
コンパイル方法は数多くありますが、初心者の方はまずVisual Studio Codeの拡張機能を利用するのが簡単です。
- Visual Studio Codeの拡張機能を使う
- Webpackやgulpなどのツールを使う
- Preprosなどのアプリケーションを使う
基本的な書き方
ここから先は、Sassの特徴的な機能であるネストなどの基本的な書き方について紹介します。
ネスト（入れ子）
Sassでは波括弧の中に波括弧をネスト（入れ子）にできます。
.wrap{
.btn{
display: block;
}
}この場合は.wrapの中にある.btnにのみスタイルを適用する指定ができて、コンパイルすると下記のようになります。
.wrap .btn{
display: block;
}要素の中の要素を指定する、いわゆる「子孫セレクタ」になります。
ネストすることによって、何度も同じclass名を書く必要がなくなるのと、どのclassに内包しているのか分かりやすくなります。
アンパサンド
ネスト内で&（アンパサンド）記号を使うと、親セレクタの名前のすぐ後ろにくっつく形で変換されます。
具体的にコンパイル前と後を見比べると分かります。
.btn{
&-primary{
display: block;
}
}上記のように「&-primary」と記述した場合は、「&」の部分にその親である「.btn」が入ります。
.btn-primary{
display: block;
}疑似要素や疑似クラスと組み合わせることで、ホバーなどの管理が非常にしやすくなります。
.btn{
&-primary{
display: block;
&:hover{
// ホバー時のスタイル
}
&::before{
// 疑似要素のスタイル
}
}
}このように管理することで、どんなCSSが適用されるのかコードを見ただけで想像しやすくなります。
アンパサンドを使った直下セレクタの指定
>で区切ることで、特定要素の直下にある要素を指定できます。
これを直下セレクタと呼ぶのですが、これもアンパサンドを使ってSassで表現できます。
article{
& > p{
font-size: 15px;
line-height: 1.5;
}
}コンパイルすると下記のようになります。
article > p{
font-size: 15px;
line-height: 1.5;
}アンパサンドを使った隣接セレクタの指定
+で区切ると、特定要素の次にくる要素を指定できます。
これを隣接セレクタと呼び、Sassのアンパサンドで表現できます。
article{
& + footer{
border-top: 1px solid #ccc;
}
}コンパイルすると下記のようになって、<article>タグの次にくる<footer>にのみスタイルが適用されるようになります。
article + footer{
border-top: 1px solid #ccc;
}アンパサンドを使った間接セレクタの指定
~で区切ることで、特定の要素以降にある要素を指定できます。
これを間接セレクタと呼び、Sassのアンパサンドで表現できます。
h2{
& ~ p{
font-size: 13px;
}
}コンパイルすると下記のようになって、<h2>タグ以降にある<p>にスタイルが適用されるようになります。
h2 ~ p{
font-size: 13px;
}ちなみに、間接セレクタは同じ階層にある要素にしか適用されないので注意が必要です。
階層を深くしすぎないように注意する
なんでもかんでもネストしていくと、どんどん階層が深くなってしまい逆に見にくいコードになってしまいます。
また、たとえば.btn-primaryを探したいときにアンパサンドで区切られていると検索に引っかからないデメリットがあります。
ルールを決めておけば「&-primary」で検索して見つけることもできますが、同じように「&-primary」の記述をしていると他にも検索候補が表示されてしまいます。
どこまで区切った方がいいのか、後から探すときに困らないか考えつつ、バランスを考えて利用するようにしましょう。
