久方ぶりにSASSを使ってみる

このブログのリニューアルで久々に一からCSSを書いている。
そしてCSS設計の本を読んだこともありBEMを使ってみている。

それにともなって素のCSSを書いて行くのはだるいなということで久々にSASSを使ってみることに。
だいぶ見通しがよくなってよろしい。

こういうSCSSを書くと

.header {
  padding-top: 20px;

  &__inner {
    max-width: 1230px;
  }
}

CSSの出力はこうなる。

.header {
  padding-top: 20px; }
  .header__inner {
    max-width: 1230px; }

&が便利で素晴らしい。

ちなみに一昔前はLESSとか色々選択肢があったけど、今はSASS（SCSS）一強なんですな。

インストール

昔はRubyで動かしていたけど最近の流れではNodeで動かすのがメジャーでありましょう。

$ npm i -D sass

動作確認

main.scssを修正がmain.cssに反映されているか確認。

$ sass src/assets/scss/main.scss:src/assets/css/main.css

watch

修正のたびにいちいちコマンドを打つのはさすがに暇人の所業なので、main.scssを修正したら自動でmain.cssに変更が反映されるようにする。

$ sass --watch src/assets/scss/main.scss:src/assets/css/main.css

npm-scripts

ついでにあとで他のフロントエンド開発系のタスクが追加されたときのことも考え、npm-scriptsでまとめて実行できるようにpackage.jsonに以下のように書いた。
シンプルなタスクはgulpとか使わずnpm-scriptsでやってしまうのが最近トレンドらしい。

{
  "scripts": {
    "build": "npm run build:sass",
    "build:sass": "sass src/assets/scss/main.scss:src/assets/css/main.css",
    "watch": "npm run watch:sass",
    "watch:sass": "sass --watch src/assets/scss/main.scss:src/assets/css/main.css"
  }
}

これでwatchは

$ npm run watch

で実行できるし、ビルドが必要なら、

$ npm run build

でサイトに必要なものをすべてまとめてビルドすることができる。