明日から書けるSASS(SCSS)入門 ~インストールから便利な使い方まで~

2020-04-03

2021-02-17

SASS(SCSS)とは?

Sassは「Syntactically Awesome StyleSheet」の略です。日本語で言えば**構文的に(Syntactically)すごい!(Awesome)スタイルシート(StyleSheet)**という意味です。

自分で(Awesome)って言っちゃうのかよ!と思いますが、SASSを使うとその使い勝手の良さに思わずAwesome!と言ってしまうかもしれません。

SASS(SCSS)のメリット

SASS(SCSS)のメリットを上げたらキリがありません。

タグやクラス、プロパティまでネストできる
変数が使える
関数が使える
ファイル分割ができる

これらをひと言で説明するなら、**「再利用性と保守性の高いスタイルシートを手軽に書ける!」**と言えます。

例えば以下のようなCSSを書いたとします。

.link {
  padding: 8px;
}
.link .link__icon {
  font-size: 1.8rem;
}

これをSASS(SCSS記法)で書くと次のようになります

.link {
  padding: 8px;
  &__icon {
    font-size: 1.8rem;
  }
}

上のようにSASS(SCSS記法)ではセレクタを入れ子にできる上に、&を使って親セレクタを省略することもできます。

SASS(SCSS)のデメリット

強いて言うなら、SASS(SCSS)の最大のデメリットは使うには環境構築が必要であることです。SASSはSASS記法またはSCSS記法で書かれたファイルをコンパイルしてCSSに変換します。

ただし、npmやgemなどがあれば簡単にインストールできます。

SASS(SCSS)のインストール方法

まずは下のコマンドからSASSをインストールしてください。

npm install -g sass

sass --versionでバージョンを確認できます。

sass --version
1.26.3 compiled with dart2js 2.7.1

SASSまたはSCSS記法で書いたファイルをCSSに変換するには次のコマンドを実行します。

sass input.scss output.css

複数ファイルをまとめて変換したい時は次のように :で繋げて実行します。

sass light.scss:light.css dark.scss:dark.css

ファイルを変更した時に自動でコンパイルしてほしい場合は--watchオプションをつけます。

sass input.scss output.css --watch

ファイルサイズを節約したいなら--style=compressedを指定します。

通常は下のように改行やインデントが入った状態でコンパイルされます。

h1 {
  font-size: 2rem;
}

--style=compressedを指定した場合は余計な改行やインデントは削除されてコンパイルされます。

h1{font-size:2rem;}

その他のコマンドラインオプションは --helpか公式ドキュメントをご確認ください。

コマンドラインオプションを覚えたり、タイピングしたりするのが面倒だと思います。package.jsonに下のようにscriptを書いておくのがオススメです。

  "scripts": {
    "sass": "sass ./css/input.scss:./css/output.css --watch --style=compressed"
  },

これでnpm run sassで実行できます!

SASS(SCSS)の書き方

SASS(SCSS)は基本的にCSSと同じように書けます。しかも &を使って親セレクタを省略したり、$で変数を使ったり、mixinを使って関数ライクなものが作れたり、@useで外部ファイルをインポートできます。

ここからはSASSのSCSS記法を中心にSASSの書き方を説明します。

SASS記法とSCSS記法

SASSは基本的にインデントのみで親子関係を表現するSASS記法とCSSライクにと;を使った方法の2種類があります。

SASS記法で書いた場合

.link
  .icon
    font:
      size: 1.2rem
      weight: bold

SCSS記法で書いた場合

.link {
  .icon {
    font: {
      size: 1.2rem;
      weight: bold;
    }
  }
}

SASS(SCSS)のコメントアウト

SASSのコメントは3通りの方法があります。

1つ目はJavaScriptライクな//を使ったコメントアウトです。
//を使ったコメントはCSSに出力される際に消去されます。

2つ目はCSSと同様の/* */を使ったコメントアウトです。
このコメントは通常はCSSに出力されます。--style=compressedを指定した場合は削除されます。

3つ目は/*! */を使ったコメントアウトです。
このコメントは--style=compressedを指定した場合でもCSSに出力されます。
ライセンスの記述などに使用できます。

SASS(SCSS)ではセレクタとプロパティを入れ子で書ける

SASS(SCSS)ではセレクタとプロパティを入れ子で書くことができます。

入れ子のセレクタは次のように書きます

.hoge {
  margin: 8px;
  .piyo {
    padding: 8px;
  }
}

CSSでは次のように出力されます。

.hoge {
  margin: 8px;
}
.hoge .piyo {
  padding: 8px;
}

入れ子のプロパティは次のように書きます。

.hoge {
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }
}

CSSでは次のように出力されます。

.hoge {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

SASS(SCSS)は&で親セレクタを省略できる

SASS(SCSS)では入れ子内で&を使って親セレクタを選択することができます。下のようにBEMとSASSを合わせて書くと長いクラス名も上手く省略できます。

.link {
  margin: 8px;
  &__container {
    margin-right: 16px;
  }
  &:hover {
    opacity: 0.8;
  }
}

この場合のCSSは以下のようになります。

.link {
  margin: 8px;
}
.link .link__container {
  margin-right: 16px;
}
.link:hover {
  opacity: 0.8;
}

SASS(SCSS)の変数の定義と使い方

SASS(SCSS)では$を使って変数を定義できます。よく使う色やフォントなどを変数定義しておくと便利です。

$twitter-color: #00acee;

変数を使う時は下のようにします。

.fa-twitter {
  color: $twitter-color;
}

SASS(SCSS)のmixinの定義と使い方

mixinは関数のように引数を受け取って、CSSのコードをまとめられる機能です。

mixinを定義するには@mixin mixin名(引数) {}のようにします。

@mixin font-theme($color) {
  font-size: 14px;
  color: $color;
}

mixinを使うには@include mixin名(引数)ようにします。

.card {
  @include font-theme(#009866);
}

例えばブレイクポイントを作るときにもmixinが使えます。

@mixin for-xs {
  @media (min-width: 0) { @content; }
}
@mixin for-sm {
  @media (min-width: 600px) { @content; }
}
@mixin for-md {
  @media (min-width: 960px) { @content; }
}
@mixin for-lg {
  @media (min-width: 1280px) { @content; }
}
@mixin for-xl {
  @media (min-width: 1920px) { @content; }
}

上のように@contentとすることで、の中に書いた内容を展開することができます。

下のようにして、ブレイクポイントごとのスタイルを書けます。

.header {
  padding: 8px 16px;
  @include for-sm {
    padding: 16px 32px;
  }
}

SASS(SCSS)の@extendの定義と使い方

@extendは別のセレクタのスタイルを継承することができます。例えばBEMでは--modifierをつけて特別なクラスを作りますが、@extendを使うと元のクラス(Block__Element)のスタイルを継承させることができます。

例えば下のように書けます。

.header {
  display: flex;
  &__text {
    color: blue;
    font-size: 1.5rem;
    &--large {
      @extend .header__text;
      font-size: 2rem;
    }
  }
}

@extendを使うとCSSは下のように出力されます。

.header {
  display: flex;
}
.header__text, .header__text--large {
  color: blue;
  font-size: 1.5rem;
}
.header__text--large {
  font-size: 2rem;
}

4行目のように.header__text, .header__text--largeのようにBlock__ElementとBlock__Element--Modifierに同じスタイルが適応されます。

スタイルを使い回せる、という点で@mixinを使うのか、@extendにするのかで悩ましいと思います。**使い分けのポイントはスタイルを変数で動的に出力するかどうかです。**変数でスタイルをコントロールしたいなら@mixinを使います。単に他のクラスのスタイルを流用したいだけなら、@extendを使います。

@extendが使える場所で@mixinを使うと出力されるコードサイズが大きくなるので、できれば@extendを使う方がオススメです。詳しくはこちらをご覧ください。

SASS(SCSS)のファイル分割(@use)

@useを使うと他のファイルに書いたSCSSをロードすることができます。ロードされる側のファイル名には_をつけます。例えば下のように書きます。

// _variables.scss
$twitter-color: #00acee;

// style.scss
@use "./variables";

.text {
 color: variables.$twitter-color;
}

こうすることで_variables.scssの変数がstyle.scssにロードされた状態でCSSが出力されます。さらにasをつけることで、エイリアスを設定することもできます。

// style.scss
@use "./variables" as v;

.text {
 color: v.$twitter-color;
}

_index.scssを定義してスタイルを1つにまとめることもできます。詳しい使い方はこちらをご覧ください。

分割ファイルをロードするには@importも使えますが、公式で非推奨になっています。詳しくはこちらをご覧ください。

SASS(SCSS)のLinter/Formatter

SCSSの記法は少し特殊なので、LinterとFormatterがあるとコンパイル前に間違いに気づいて修正できるので便利です。SCSSをLintしてFormatできるモジュールは多々ありますが、オススメはstylelint-scssです。

stylelint-scssをインストールするには以下のコマンドを実行してください。

npm install stylelint stylelint-scss

stylelint-scssを使うには.stylelintrcに設定を書きます。

{
...
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
...
  }
}

VSCodeならプラグインを入れれば使えるようになります。VimならALEなどがオススメです。