2020-10-04/2020-10-05

Sass(SCSS)(サス)は便利なのか

「別にCSSで十分間に合っているから必要ない」

「学習コストが高そう」

「コマンド画面使わなければいけない」

などSassを使用しない人は上記のようなことを考えがちです。

何せ自分もそうだったのでよくわかります。

ただ、CSSを使用している最中に

「毎回同じ色指定するのは面倒くさい」

「クラスみたいな概念があれば便利なのに」

「コンポーネントごとに整理したい」

と思っていました。

上記のような点を解決できるのが「Sass」でした。

なので、今はSassにどっぷりと浸かっています。

この記事ではSassの便利な点と導入方法について見ていきたいと思います。

Sassは「Visual Studio Code」「Sublime Text」などよく使用されるエディタでも使用可能です。

そもそもSassって何？

SassはCSSのメタ言語(プリプロセッサ)です。

要するにCSSを拡張した言語ということになります。

その他のメタ言語としては「Less」「PostCSS」などがあります。

また、「Sass」と似たものに「SCSS」というものがあります。

「Sass記法」で書かれた「Sass」ファイルが「.sass」

「SCSS記法」で書かれた「Sass」ファイルが「.scss」

となっています。

「Sass」は「SCSS記法」で書かれたものが主流なようです。

というのも「SCSS記法」はCSSの記述とほとんど変わらず書いていけるため、CSSを学んだ人が書きやすいという特徴を持っています。

これから学んでいく方は「SCSS記法」で学んでいくことになると思います。

ブラウザでは「.sass」「.scss」ファイルを「css」と同様に読み込むことができません。

「.sass」「.scss」ファイルは「css」にコンパイルする必要があります。

コンパイルといってもこの辺りは自動化させることができますので深く考えなくても問題ありません。

Sassはどのように便利なのか

次にSassの魅力的な部分を紹介していきます。

魅力的な機能はたくさんありますが、以下の５つに絞って紹介します。

記述を簡略化できる
変数を使用できる
スタイルの継承ができる
複数のファイルを一つのCSSにコンパイルできる
関数を利用できる

以上についてコードも交えながら説明します。

記述を簡略化できる

Sassの「ネスト」とという機能を使用することで、親のセレクタを書く必要がなくなります。

以下のコード見るとわかりやすいと思います。

.example {
    text-align: center;
    
    a {
        color: blue;
    }
}

.example {
     text-align: center;
}

.example a {
    color: blue;
}

以上のようにネスト内に記述したセレクタに親セレクタが付与された形で出力されます。

変数を使用できる

Sassでは変数を使用することが可能です。

変数に値を定義しておくことで、その値を呼び出すことができます。

繰り返し使用する値などは定義しておくと、変更などあった際に簡単に対処できます。

以下の例では色を変数としておき、利用しています。

$example_color: #fefefe;

.example {
    color: $example_color;
}

.example {
    color: #fefefe;
}

変数などを一つのファイルにまとめて定義し、次に紹介する「ほかのファイルを読み込む」で読み込むことで使用する方法も可能です。

変数を一元管理することができ、コード内から定義箇所を探し出す必要性もなくなります。

スタイルの継承ができる

Sassではスタイルの継承を行うことが可能です。

同じ記述を行うわなくて良いため効率的に記述することが可能です。

%btn {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
}

.example {
    @extend %btn;
    color: #fff;
}

.example {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
}

.example {
  color: #fff;
}

以上のようにデフォルトの形を指定しておく形で使用されます。

上記では「@extend」というものを利用していますが、「@mixin」というもう少し柔軟な利用方法があるものもあります。

@mixin exampleBox($margin: 0 0 30px, $padding: 20px) {
    margin: $margin;
    padding: $padding;
}

.example {
    @include exampleBox(0 0 20px, 10px);
    background-color: #eee;
}

.example2 {
    @include exampleBox();
}

.example {
  margin: 0 0 20px;
  padding: 10px;
  background-color: #eee;
}

.example2 {
  margin: 0 0 30px;
  padding: 20px;
}

値を変更する前提であれば、「@extend」ではなく「@mixin」のように変数を指定して反映させることも可能です。

複数のファイルを一つのCSSにコンパイルできる

CSSでインポートを行うのと同様にファイルのインポートを行うことができます。

@import "example";

「example.scss」というファイルを読み込んでいます。

管理しやすようcssファイルを分割している場合、分割された分のHTTPリクエストが発生します。

Sassでは製作段階のファイルではコンポーネントファイル、設定ファイルなど分割しておき、コンパイル後のファイルはCSSファイル一つにまとめることが可能です。

また、インポートはしたいけれど出力を行いたくないときがあると思います。

その際はファイル名の前に「_(アンダースコア)」を付けることでインポートされるだけでCSSファイルの出力は行われません。「_(アンダースコア)」がついているファイルはパーシャルファイルと呼ばれます。

関数を利用できる

「特定の値が欲しい」など自分の欲しい関数を自作することができます。

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

.example {
    width: calc_percent(250px, 1280px);
}

.example {
  width: 19.53125%;
}

%の計算や文字を大きさなど%やremで記述を行いたい場合自分で計算せずにその割合を求める関数を作成しておくことができます。

また、以下のようにデフォルトで定義されている関数もあります。

.example {
    background: rgba(#eaeaea, .5);
}

.example {
  background: rgba(234, 234, 234, 0.5);
}

rgbaを使用したいときに16進数のRGB値を使用したい場合などに、便利な関数です。

エラーにならないようにrgbに変更された値が出力されています。

Sassの環境を作成する

先の紹介でコンパイルなことが分かったと思いますが、どのようにコンパイルするのでしょうか。

ここではそのコンパイルできる環境を整えていきたいと思います。

なお、今回の方法は「node-sass」を使用する方法を紹介します。他にはRubyを使用したものがあります。

流れは以下のようになります。

node.jsのインストール
node-sassのインストール
使用方法

node.jsのインストール

Node.jsのホームページから安定版(推奨版)をダウンロードしましょう。

ダウンロードしたものを起動させるとインストールが始まります。

「次へ」と進めていきインストール完了させましょう。特に変更の必要はありません。

コマンド画面から以下を入力しバージョンが表示されたら正常にインストールできています。

>node -v
v12.16.3

node-sassのインストール

node-sassはnode.js環境下でsassをコンパイルすることができるライブラリです。

コマンド画面で以下を入力してください。node-sassをインストールします。

 >npm install -g node-sass

インストールが完了したら、node.jsと同様にバージョンを確認して、正常にインストールされているか確認します。

>node-sass -v
node-sass       4.14.1  (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

node-sassと一緒に「libsass」というものが表示されています。

「libsass」はC/C++で開発されたsassのコンパイラーです。

なので、「node-sass」は正確にいうと「libsasss」をnode.js下で動かすためのライブラリです。そのため「Wrapper」と表示されています。

使用方法

以上の手順でsassをコンパイルする環境が整いました。

以下のコードでコンパイルを行うことができます。

> node-sass style.scss style.css

「style.scss」を「style.css」にコンパイルするコマンドです。

正常に成功すればstyle.cssが生成されます。

コンパイルエラーの場合にはコマンド上にエラーログが表示されます。

まとめ

実際に使用する方法は簡単に説明をしました。

gulpなどのタスクランナーと共に使用すると毎度コマンドを入力しなくても自動でコンパイルを行うことができます。

(気になる方はgulpの導入記事を参考にしてください。)

まずは簡単にでもSassを触れてみると良いと思います。

下記URLではSassをcssに変換してくれます。Sassの気になる部分を実際に記述してみて試してみましょう。

https://www.sassmeister.com/

Sassは非常に便利です。

ただし、ネストしすぎたりする場合には詳細度が高くなりすぎてCSSとして管理が行いづらい状況にもなってしまいます。

BEMなどのCSS設計と合わせて抑えておくと十分な効果を発揮しやすくなるでしょう。

本で学びたい方へ

Web制作者のためのSassの教科書

sassを学ぶ手順がわかりやすく書かれています。

また、コマンド画面が苦手な人に向けてのフォローもしてくれています。

基礎の説明に加えて実践で使用していくための例やgulpの設定などすぐに使えるテクニックが盛り込まれています。

CSS設計完全ガイド

css設計のための本です。

CSSで後からの追加や修正などで痛い目を見たことある人は必見です。

現在あるCSS設計の説明に加えて実際に使用されることの多いコンポーネント(モジュール)単位でのCSS例が多く盛り込まれています。