WindowsでSass(SCSS)を使う準備

最終更新: 2018-07-27
Rubyで動くSass(ruby-sass)は非推奨となりました。
2019年3月26日にサポートが終了します。
🔗 Ruby Sass is Deprecated « Sass Blog

他の方法として、スタンドアロン版をGitHubからダウンロードしたり、npmから入手する方法が紹介されています。
🔗 https://sass-lang.com/install

で、npmで入手できるsass (dart-sass)を試してみたのですが、--watchでディレクトリを監視している時に文法エラーがあると、その後の監視が動作しなくなることが頻繁にありました。
Ctrl + Cで強制終了して再びコマンドを実行、という手間が面倒で悩んでいました。

そこで、PostCSSを試してみました。 🔗 PostCSSまとめ - Qiita

CSSの未来の仕様を先取りできるプラグインを使おうと思っていましたが、CSS本家の仕様変更によって、習得した記法が仕様から外れてただのオレオレ記法になってしまう危険もあり、不安定だなと感じました。

結局、dart-sassとは別のnode-sassを使うことに落ち着きました。
ただ、PostCSSについては、プリプロセッサー系とは別の、ベンダープレフィックスをコマンド一つで付けてくれるAutoprefixerはとても便利なので、これは使い続けようと思います。

---

目次

---

環境

• Windows 10 64bit
• node-sass v4.9.2
• postcss-cli v6.0.0
• autoprefixer v9.0.2

---

node-sass

node-sassのインストール

node.jsのインストールの説明は省略します。

# (CLIはPowerShellを使います)
> npm i -g node-sass

node-sassを使う

Sassの記法の説明は省略します。

# SCSS記法で書いたスタイル指定をCSSに変換する
> node-sass index.scss style.css --output-style expanded

# ファイルの変更を監視する
> node-sass index.scss style.css --output-style expanded -w

# 圧縮する
> node-sass index.scss style.css --output-style compressed

Autoprefixer

ついでなのでメモしておきます。

Autoprefixerのインストール

# PostCSS, Autoprefixerをインストール
> npm i -g postcss-cli autoprefixer

Autoprefixerを使う

まず、対応するブラウザを指定するファイル(.browserslistrc)を作ります。
🔗 https://github.com/browserslist/browserslist

# 最近の2つのバージョンに対応させる
# IEは10から対応となる
last 2 version

あとはPowerShellで。

# style.cssを上書きする
> postcss style.css -o style.css --no-map --use autoprefixer

組み合わせて使う

SCSS記法でスタイル指定して、node-sassでCSS形式にまとめて、Autoprefixerでベンダープレフィックスを付けます。
package.jsonのrun-scriptなら、Windowsでもパイプ記号(|)でコマンドの結果を渡すことができます。

{
  "scripts": {
    "build": "node-sass sass/index.scss --output-style compressed | postcss -o style.css --use autoprefixer --no-map",
    "expand": "node-sass sass/index.scss --output-style expanded | postcss -o style.css --use autoprefixer --no-map",
    "watch": "node-sass sass/index.scss style.css --output-style expanded -w"
  }
}

1番目のbuildは本番用です。
圧縮され、ベンダープレフィックスもついています。
2番目のexpandは確認用です。
圧縮されていないので普通に読めます。
3番目のwatchは普段の開発用です。

# 例: build
> npm run build