やっぱりSASSは文法的にすごいスタイルシートであった。

Sassはcssの拡張版みたいなものであり、

公式サイトでは「文法的にすごいスタイルシート」と謳っている。

https://2020.stateofcss.com/ja-JP/technologies/pre-post-processors/

で確認しても、利用率が高いユーティリティであり、

フロントエンド開発では知らない人がいないほどである。

そもそもcssはHTMLに装飾を付けるためのものであり、

HTMLページ上の各要素に対して装飾を付けることができる。

基本、cssは一つの要素、属性に対して{}の範囲内に装飾を指定する。

div#pane {
  margin: 0 auto;
  background-color: #e0e0e0;
}

div#pane h2 {
  margin: 5px 3px;
  font-weight: bold;
}

しかし、要素の多いページに対してcssを付けるとなると、これが大変なのである。

cssの定義を別ファイルで定義した場合、そのファイルを上から下への順で装飾処理をしていくのだが、

よくあるのが、ある要素に余計な装飾が混じって表現されていて、

その余計な装飾がどこで定義されているのかを確認するのに、

cssファイルの該当箇所より上の行を確認しないといけない。

つまり時間がかかる。

Sassはある要素、およびその子要素に当たる装飾定義をネストで記述できる。

div#title-pane {
  margin: 0 auto;
  background-color: #e0e0e0;
  h2 {
    margin: 5px 3px;
    font-weight: bold;
  }
}

このように、まとめることができるので、コードをメンテナンスしやすいメリットがある。

■Sassをインストール

Sassを利用するためには、nodeが必須である。

nodeを公式サイトからインストールしてもいいが、

nodeのバージョン管理がしやすいnodistのインストールをお勧めする。

参考URL：nodistでNode.jsをバージョン管理 - Qiita

https://qiita.com/satoyan419/items/56e0b5f35912b9374305

nodeをインストールすると、npmコマンドが使えるので、

そのコマンドを使ってSassのモジュールをインストールする。

Sassのモジュールは複数あって、今まではnode-sassが使われていたのだが、

公式サイトでは、そのnode-sassが非推奨となったようだ。

公式サイトに従い、ここではDart Sassをインストールする。

参考URL：Sass: LibSass is Deprecated

https://sass-lang.com/blog/libsass-is-deprecated

(CMD)作業ディレクトリをworkとする。
> cd /path/work
> npm -y init
> npm install -g sass

■簡単なサンプル

ディレクトリ構成

/work
  /src
    style.scss
  /dist
    index.html
  package.json

src/style.scss

div#title-pane {
  margin: 0 pane;
  background-color: #e0e0e0;
  h2 {
    margin: 5px 3px;
    font-weight: bold;
  }
}

dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>This is Test</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div id="title-pane">
      <h2>This is Test.</h2>
    </div>
  </body>
</html>

この状態で、カレントディレクトリworkにて、次のコマンドを実行する。

> sass src/style.scss:dist/style.css

これにより、scssで定義したものが、cssの記述に変換し、dist/style.cssに出力される。

dist/style.css

div#title-pane {
  margin: 0 pane;
  background-color: #e0e0e0; }
  div#title-pane h2 {
    margin: 5px 3px;
    font-weight: bold; }

/*# sourceMappingURL=style.css.map */

・・・見栄えはあまりよくないが、これでindex.htmlに対して装飾された要素として表示できた。

■もう少し工夫したい

実際の現場ではあるある事例の一つとして、

例えば、開発環境であれば、決まったインデントで出力したい。

本番環境であれば、圧縮された状態で出力したい。

開発環境用として、決まったインデントで出力したい場合は、--style=expanded を付ける。

> sass --style=expanded src/style.scss:dist/style.css

dist/style.css

div#title-pane {
  margin: 0 pane;
  background-color: #e0e0e0;
}
div#title-pane h2 {
  margin: 5px 3px;
  font-weight: bold;
}

/*# sourceMappingURL=style.css.map */

圧縮された状態で出力したい場合、--style=compressedを付ける。

> sass --style=compressed src/style.scss:dist/style.css

dist/style.css

div#title-pane{margin:0 pane;background-color:#e0e0e0}div#title-pane h2{margin:5px 3px;font-weight:bold}
/*# sourceMappingURL=style.css.map */

■さっきから気になっていたんだ・・・style.css.mapって何？

通常のsassコマンドでは、デフォルトでstyle.css.mapも出力される。

これはソースマップであり、cssの該当箇所が生成元のscssファイルのどの行に当たるのか

その対応を伝えるためのファイルらしい。

どこに伝えるのかというと、ブラウザである。

試しにGoogle Chromeでindex.htmlファイルを開き、F12で確認してみる。

確かに、scssの該当箇所を確認することができた。

本番環境では、さすがにscssファイルも含めてリリースしないのが大半のはずなので、

このソースマップを出力しないというオプション --no-source-map を付けて出力しないこともできる。

> sass --no-source-map --style=compressed src/style.scss:dist/style.css

■保存したら自動で処理する方法はないか？

scssファイルを保存したら自動でcssに変換するには、--watchオプションを付ける。

> sass --watch --style=expanded src/style.scss:dist/style.css

これにより、scssファイルが保存されるたびに、cssに変換される。

■いちいち長いコマンドを打つのは面倒くさい？node scriptを活用しよう

node-scriptを利用することで、エイリアスコマンドの定義ができる。

package.json

{
  "name": "sass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "sass-build": "sass --style=expanded src/style.scss:dist/style.css",
    "sass-watch": "sass --watch --style=expanded src/style.scss:dist/style.css",
    "sass-release": "sass --no-source-map --style=compressed src/style.scss:dist/style.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"

  // 以降省略

このように定義することで、

> npm run sass-build

で実行できる。

■複数のscssファイルをまとめて1つのcssファイルにしたい

これも、現場あるある事例の一つで、

共通のcss定義を複数のscssファイルにすることで、再利用しやすくできる。

ディレクトリ構成

/work
  /src
    style.scss
    /base
      _base.scss
  /dist
    index.html
  package.json

src/base/_base.scss

body {
  margin: 0;
  background-color: #f0f000;
}

src/style.scss

@import "base/base"; // @importでbase/_base.scssを読み込む

div#title-pane {
  margin: 0 pane;
  background-color: #e0e0e0;
  h2 {
    margin: 5px 3px;
    font-weight: bold;
  }
}

■変数、@mixinを活用すればもっと便利になる

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

加えて、@mixinを利用することで、定義をまとめることができる。

ディレクトリ構成

/work
  /src
    style.scss
    /base
      _base.scss
  /dist
    index.html
  package.json

src/base/_base.scss

body {
  margin: 0;
  background-color: #f0f0ff;
}

// 変数
$msgInfo: #32cd32;
$msgWarn: #ffa500;
$msgError: #ff4500;

// mixin
@mixin msg($color: #000000) {
  border: solid 1px $color;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 5px;
  width: 80%;
  margin: 5px auto;
  p {
    margin: 5px;
    color: $color;
    font-weight: bold;
  }
}

src/style.scss

@import "base/base";

div#title-pane {
  margin: 0 pane;
  background-color: #e0e0e0;
  h2 {
    margin: 5px 3px;
    font-weight: bold;
  }
}

div.msgInfo {
  @include msg($msgInfo);
}

div.msgWarn {
  @include msg($msgWarn);
}

div.msgError {
  @include msg($msgError);
}

dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>This is Test</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div id="title-pane">
      <h2>This is Test.</h2>
    </div>
    <div class="msgInfo">
      <p>This is Info Message.</p>
    </div>
    <div class="msgWarn">
      <p>This is Warning Message.</p>
    </div>
    <div class="msgError">
      <p>This is Error Message.</p>
    </div>
  </body>
</html>

cssに変換後の画面は次のようになる。

■まとめ：Sassはやっぱり文法的にすごいスタイルシートだった

他にも機能があるが、

今回挙げた例だけでも十分に活用できるのではないだろうか。

一から定義するのは確かに時間がかかるが、

Sassは、効率的に実装できるツールである。

ツールを活用して、どのように実装するかは利用者次第だ。

デジタル忍者ブログ

デジタル忍者ブログ

やっぱりSASSは文法的にすごいスタイルシートであった。