Sass（Dart Sass）の使い方と便利な機能まとめ

2023.12.01
HTML&CSS

Sass（Dart Sass）の基本的な使い方と、よく使用する便利な機能をまとめました。

今回は、公式の推奨実装環境であるDart Sassを使用しています。

SASSの基本的な使い方

SASSの書き方は、通常のCSSとほぼ同じです。スタイルを適用したいクラスや要素の括弧の中に、CSSのプロパティを記入します。

.sample {
  background: #C3C3C3;
  .title {
    color: #38b6ff;
    font-size: 2rem;
  }
  .text {
    font-size: 1.4rem;
  }
}

「.sample」の括弧の中に、「.teitle」と「.text」のスタイルを記入しています。

コンパイル

作成したSASSファイルをコンパイルして、出力したCSSを使用します。例えば、上記のコードを記入した「sample.scss」をコンパイルすると、下記のコードが記入されたCSSファイル「sample.css」が出力されます。

.sample {
  background: #C3C3C3;
}
.sample .title{
  color: #38b6ff;
  font-size: 2rem;
}
.sample .text {
  font-size: 1.4rem;
}

CSSでは、入れ子になっていたクラス「.teitle」と「.text」が、親クラス「.sample」をつけた状態で順に出力されています。

このように、クラスを入れ子にして出力する事で、同じクラスを複数記入する必要がなくコードも短くなります。CSSでは、そのまま記入しなければならないコードを簡略化する事ができるのがSASSのメリットのひとつです。

SASSをVSCodeでコンパイルする手順は、下記の記事で紹介しています。

Live Sass Compilerを使ってVSCodeでSCSSをコンパイルする方法

Visual Studio Code（ビジュアル・スタジオ・コード）でSCSSをコンパイルできるプラグインLive Sass Compilerの使い方の備忘録です。 Live Sass Compile…

文字コード

Dart Sassを使用する場合、ファイルのエンコーディングは「UTF-8」で作成します。コードの先頭にも「@charset “UTF-8”;」を設定します。

@charset "UTF-8";

.sample {
  background: #C3C3C3;
  .title {
    color: #38b6ff;
    font-size: 2rem;
  }
  .text {
    font-size: 1.4rem;
  }
}

入れ子（ネスト）

上記の例でも使用した入れ子を使うことで、同じクラスを何度も記入する必要がなく、修正も一括で行うことができるようになります。入れ子はクラスだけではなく、要素にも使用できます。

SASS

.sample {
  background: #C3C3C3;
  h2 {
    color: #38b6ff;
    font-size: 2rem;
  }
  .content p {
    font-size: 1.4rem;
  }
}

CSS

.sample {
  background: #C3C3C3;
}
.sample h2 {
  color: #38b6ff;
  font-size: 2rem;
}
.sample .content p {
  font-size: 1.4rem;
}

コンパイルしたCSSでは、入れ子にしたh2とpの先頭に「.sample」が追加されています。

親セレクタの参照

入れ子の際に、「&」を使用することで親セレクタを参照することができます。

SASS

.sample a {
  color: #333;
  &:hover {
    color: #38b6ff;
  }
}

CSS

.sample a {
  color: #333;
}
.sample a:hover {
  color: #38b6ff;
}

「&:hover」で、aタグにCSSの擬似クラス「:hover」を追加して出力しています。

疑似要素も同様に出力できます。

SASS

.sample {
  position: relative;
  &::before{
    position: absolute;
    content: "";
  }
}

CSS

.sample {
  position: relative;
}
.sample::before {
  position: absolute;
  content: "";
}

疑似要素「before」を追加して出力しています。

変数（Variables）

変数プログラムでは変数に値を格納しておくことで、その値を複数の箇所で共有することができます。

SASS

$c-bule: #004ee2;

.content {
  color: $c-bule;
  border: solid 2px $c-bule;
}

CSS

.content {
  color: #004ee2;
  border: solid 2px #004ee2;
}

デザインのメインカラーやアクセントカラーを設定すれば、色が変更になった場合も一括で変更が可能です。

色の他にも、文字の太さやサイズなど、様々な値が設定できます。

繰り返し（@for）

@forは、指定した回数だけ繰り返し処理を実行します。

例えば、繰り返しによってマージンの値を5pxごとに設定したクラスを出力する事もできます。

SASS

@for $i from 1 through 5 {
  .margin-top#{$i * 5} {
    margin-top: 5px * $i;
  }
}

CSS

.margin-top5 {
  margin-top: 5px;
}

.margin-top10 {
  margin-top: 10px;
}

.margin-top15 {
  margin-top: 15px;
}

.margin-top20 {
  margin-top: 20px;
}

.margin-top25 {
  margin-top: 25px;
}

「from」で指定した「開始の数」から、「through」で指定した「終了の数」まで、値を１ずつ増やしながら処理を繰り返します。値は、指定した変数名「$i」に割り当てられます。

上記のように、一定の数ずつ増える余白などのユーティリティクラスを作成する際によく利用されます。

ミックスイン（@mixin、@include）

ミックスインは、「@mixin」でよく利用するCSSのスタイルを定義しておいて、別の場所でそのスタイルを「@include」で使い回せるようにする機能です。

一度定義したスタイルを再利用できるので、共通のボタンデザインなど定義しておくと管理が効率的になります。

SASS

@mixin blueBtn {
  color: #fff;
  background-color: #38b6ff;
  border-radius: 30px;
  padding: 15px 30px;
}
 
.sample {
  @include blueBtn;
}

CSS

.sample {
  color: #fff;
  background-color: #38b6ff;
  border-radius: 30px;
  padding: 15px 30px;
}

上記の例では、「@mixin」の「blueBtn」に設定したスタイルを「@include blueBtn」で呼び出しています。

引数を使ったミックスイン

ミックスインは、引数を設定することでより柔軟な使い回しが可能になります。

SASS

$c-blue: #38b6ff;

@mixin customBtn($bg-color, $radius, $width) {
  color: #fff;
  background-color: $bg-color;
  border-radius: $radius;
  width: $width;
}
 
.sample {
  @include customBtn($c-blue, 30px, 300px);
}

CSS

.sample {
  color: #fff;
  background-color: #38b6ff;
  border-radius: 30px;
  width: 300px;
}

上記の例では、ボタンの「background-color」、「border-radius」、「width」をそれぞれ引数にして、「customBtn($bg-color, $radius, $width) 」で読み込んで使用しています。

引数を利用することで、背景色や角丸の細かい設定が可能になります。

メディアクエリの管理（@mixin、@content）

「@content」と「@mixin」は、組み合わせるとメディアクエリ（ブレイクポイント）を簡単に設定することができます。

SASS

$breakpoint: (
  "sp": "screen and (max-width: 599px)",
  "tab": "screen and (min-width: 768px)",
  "pc": "screen and (min-width: 1024px)",
);

@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
    @content;
  }
}

.sample {
  width: 20%;
  @include mq(tab) {
    width: 50%;
  }
  @include mq(sp) {
    width: 100%;
  }
}

CSS

.sample {
  width: 20%;
}
@media screen and (min-width: 768px) {
  .sample {
    width: 50%;
  }
}
@media screen and (max-width: 599px) {
  .sample {
    width: 100%;
  }
}

デバイス幅で切り替えるブレイクポイントの値は、マップで管理します。今回の例では、「$breakpoint」のマップで「sp」「tab」「pc」３つのブレイクポイントを設定しています。

「@mixin」で、用意した引数「$bp」に該当するブレイクポイントをマップから取得してきます。

「@media」には、「#{ }」と「map-get()関数」でマップから該当するメディアタイプ(screen)と理論演算子(and)、ブレイクポイントの数値も文字列を挿入しています。

「@content」には、記述されたスタイルが反映されます。

例えば、「@include mq(tab) 」の箇所に「@media screen and (min-width: 768px)」が挿入されます。

CSSの各所で使用されるメディアクエリ（ブレイクポイント）を一括で管理できます。

画面サイズでデザインを変える、レスポンシブ対応のWebサイトでよく使用される方法です。