Dart Sassを使う上で1番基本的なネストやアンパサンドの書き方｜Dart Sass入門

Sassの前提知識

Sassは「Syntactically Awesome StyleSheet」の略で、直訳すると「構文的に素晴らしいスタイルシート」になります。

下記のような機能が使えて、最終的にSassをコンパイル（変換）してCSSにすることで、ブラウザでも問題なく読み込めて、なおかつ便利な機能が使えます。

• CSSを入れ子にできるネスト機能
• 変数機能（Sassが登場した当時はCSSの変数機能もまだ存在していなかった）
• mixinやextendなど、よく使う記述一式をグループ化して利用できる

これらの機能を使うことで、記述量を減らしたり、CSSの管理がしやすくなります。

現在はDart Sassが主流

Sassにもいろいろ種類がありますが、2022年現在は「Dart Sass」と呼ばれるものが主流になっています。

それ以外の種類については過去にまとめているので、ぜひそちらの記事をご覧ください。

Webrandum

「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ

https://webrandum.net/sass-compile-type

Dart SassやLibSass、Ruby Sassなど、Sassにもいくつか種類があります。2022年7月現時点ではDart Sassが主流ですが、それ以外との具体的な違いに関してまとめておきます。Sassの種類「Sassの種類」といっても2つの側面があります。1つは「記法」で書き方の問題です。2つ目はSassをコンパイルしている「言語」の問題です。最近は記法の方は「SCSS記法」が一般的になっているので、現在Sassの種類に関する話をするときは言語を指す場合が多いです。記法記法に関しては「SASS記法（全て大文字になるので注意）」と「SCSS記法」の2種類しか...

Sassのコンパイル方法

ブラウザはSassを直接読み込めないので、最終的にCSSにコンパイルする必要があります。

コンパイル方法は数多くありますが、初心者の方はまずVisual Studio Codeの拡張機能を利用するのが簡単です。

• Visual Studio Codeの拡張機能を使う
• Webpackやgulpなどのツールを使う
• Preprosなどのアプリケーションを使う

Webrandum

Visual Studio CodeでDart Sassのコンパイルができる拡張機能「DartJS Sass Compil...

https://webrandum.net/vscode-plugin-dartjs-sass-compiler-and-sass

Sassをコンパイルする方法は様々です。案件レベルでがっつりする場合は開発環境を整える必要がありますが、ちょっと1人でSassを触りたいレベルであればVisual Studio Codeの拡張機能を使うとラクです。今回はVisual Studio CodeでDart Sassのコンパイルができる「DartJS Sass Compiler and Sass Watcher」を紹介します。DartJS Sass Compiler and Sass Watcher下記2つの機能が使える拡張機能です。 Sassのコンパイル Auto Prefix（CSSのベンダープレフィックス自動付与）「Live Sass Compiler」という拡張機能も有名ですが、こちらはDa...

基本的な書き方

ここから先は、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」の記述をしていると他にも検索候補が表示されてしまいます。

どこまで区切った方がいいのか、後から探すときに困らないか考えつつ、バランスを考えて利用するようにしましょう。