【使わないと損】CSSを楽に書ける！Sassのメリットと導入方法

「もっと楽にCSSを書きたいな」
「毎回同じようなスタイルを書いているな」
「CSSでも変数を使えたらいいのに」

そんな悩みを持っている方のために、CSSの記述を数倍効率化する”Sass”をご紹介したいと思います。

ということでこんにちは、株式会社Playground Webシステム開発部の稲垣です！

Webサイト制作やWebアプリ開発をするなら、Sassを知らないとまじで損です！

Sassとは

Sassは「Syntactically Awesome StyleSheet」の英略です。

Awesomeって使ってるあたり自信満々ですね。笑

ただし、名前に恥じぬほど便利で、1度使ったら普通のCSSの記述には戻れません。

要するに「簡単でより便利にCSSを記述できるすごいやつ」だと思ってください。

Sassは「CSSプリプロセッサ」と呼ばれており、「マークアップ言語」のCSSと異なり「スクリプト言語」として扱われます。

あとで紹介する通り、Sass内では変数も使えますしね。

Sassの構文で書いたメタCSS（＝CSSっぽいもの）を、コンパイルしてcssファイルに吐き出してくれます。

※この記事では、SASS記述形式とSCSS記述方式のうち、後者を使って解説します。

なぜ使うのか？Sassのメリット3つ

なぜSassを使うべきなのでしょうか？

それは普通にCSSを記述するよりも以下3つのメリットを得られるからです。

それぞれ具体的に解説します。

Sassのメリット１｜再利用性が高まる

Sassの再利用性が高い理由の1つは「変数が使えること」です。

その他にも1度記述したコードを再利用できる「mixin」「include」「extend」といった関数も非常に便利です。

再利用することで手間が減るだけでなく、保守性も高まります。

改修しやすいコードになるということですね！

Sassのメリット２｜作業効率が高まる

上記の変数や関数も効率化につながりますが、Sassの最大の特徴は「CSSをネストして記述できる」ことです。

Sassのネストを使うと、以下のように記述できます。

_hoge.scss

.p-grid__hoge {
  max-width: 600px;
  text-align: left;
  p {
    margin: 0 auto 1rem auto;
  }
  ul {
    list-style: circle;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    li {
      line-height: 1.7;
    }
  }
}

hoge.css

.p-grid__hoge {
  max-width: 600px;
  text-align: left;
}
.p-grid__hoge p {
  margin: 0 auto 1rem auto;
}
.p-grid__hoge ul {
  list-style: circle;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.p-grid__hoge ul li {
  line-height: 1.7;
}

.p-grid__hogeというクラス名を何度も書かなくていいことが分かりますよね。

ネストしている分、どのクラスの子要素に対するスタイルなのかも分かりやすいです。

Sassのメリット３｜BEMやFLOCSSなどのCSS設計と相性がいい

Sassはネストで記述できることで、BEMやFLOCSSと呼ばれるCSS設計と相性が良いです。

僕がBEMとFLOCSSを組み合わせたCSS設計をしています。

その場合、Sassを使うと以下のような書き方ができます。

.p-grid {
  display: -ms-flexbox;
  display: flex;
  
  &__foo {
    @extend .p-grid;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  
  &__bar {
    @extend .p-grid;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}

上記の記述で生成されるCSSをざっくり解説すると以下の通りです。

.p-gridというFlexboxを作るクラスから、Flexboxをどのように扱うかというクラスを派生して作っているというイメージですね。

Sassでは”&”を使って、クラス名前を連結することができる性質を利用しています。

Sassを使う上での注意点

複数人でCSSを管理する場合、全員がSassを導入していないと手間が増えます。

要するに、通常のCSSで書いている人がいたら、その人に合わせなければならないということですね。

僕の観測範囲内ですが、Webサイト制作を主とするコーダーはSassを導入している割合が少ないと思います。

一方、BabelやWebpackなどのコンパイラも利用しているフロントエンドエンジニアは、Sassを導入している割合が高いです。

Sassの導入方法

それではSassを導入してみましょう。

今回は、npmで以下2つのSassパッケージを導入します。

Sassパッケージをnpmでインストール

以下のコマンドでインストールしてください。

npm install --save node-sass node-sass-globbing

Sassモジュールファイルを用意する

パッケージをインストールしただけではSassはまだ使えません。

Sassはコンパイルするために@import "_hoge.scss"のように「モジュール化されたscssファイル」をインポートします。

なのでまずはモジュールとなるscssファイルを作りましょう。

ファイル名の先頭に”_”をつけることでモジュール化できます。

その後、ルートディレクトリ配下に”style.scss”を作成して、以下のように記述してみましょう。

style.scss

@import "assets/css/_hoge.scss";

上記は”assets/css”ディレクトリ配下の”_hoge.scss”というモジュールファイルを読み込む場合の記述です。

そして、以下のコマンドを実行してください。

node-sass --output-style compressed style.scss > style.css

style.scssに記述されたモジュールファイルを、まとめてコンパイルしてstyle.cssファイルに出力します。

まとめると、以下の流れになりますね。

node-sass-globbingで複数のモジュールをまとめて読み込もう

しかし、上記で解説した方法だと、モジュールファイルが増えてくると、style.scssでimportする量も増えます。

FLOCSSのCSS設計を採用している場合、モジュールファイルが増えがちで、その度にstyle.scssを修正するのは手間ですよね。

そこでnode-sass-globbingを使うと、正規表現を使ってstyle.scssを以下のように記述できます。

style.scss

@import "assets/css/foundation/*.scss";
@import "assets/css/layout/*.scss";
@import "assets/css/object/**/*.scss";

上記の記述は、以下のようなディレクトリ構造の場合で有効です。

css
 |- foundation
 |   ┗ _base.scss
 |- layout
 |   |- _footer.scss
 |   ┗ _header.scss
 ┗ object
     |- component
     |  ┗ _foo.scss
     |- project
     |  ┗ _bar.scss
     ┗ utility
        ┗ _foobar.scss

ポイントをまとめると以下です。

そして、package.jsonに以下のスクリプトを登録してみましょう。

package.json

"scripts": {
  "sass": "node-sass --importer node_modules/node-sass-globbing/index.js -o assets/css/ style.scss",
}

これでターミナルで以下のコマンドを実行してください。

npm run sass

style.scssがnode-sass-globbingを利用しながら複数モジュールを読み込み、コンパイルして、assets/cssディレクトリ配下にstyle.cssを出力してくれます。

以上がSassの解説になります。

便利なのでぜひ使ってみてくださいね！

ABOUT ME

稲垣 貴映

サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。