Syntax Error.

Sass も npm でインストールできるようになってることを知ったので、インストールして使ってみます。

1. node-sass をインストールする

作業ディレクトリを適当に作って移動しておきます。

$ mkdir hello-sass
$ cd hello-sass

npm でインストール可能なので、 yarn を使ってインストールします。今回はグローバルではなく作業ディレクトリにインストールします。

$ yarn add node-sass
・
・
success Saved 184 new dependencies.
・
・
├─ node-sass@4.7.2
・
・
✨  Done in 8.27s.

なかなか依存モジュール数すごいですね。。。

2. scssファイルを作成する

適当に scss形式のファイルを作成しておきます。ここでは style.scss とします。

(style.scss)

body {
  color: #333;
  h1 {
    color: #666;
  }
}

ネストをさせてるので、このままだと CSS としてブラウザは認識できません。

3. コンパイルする

node-sass [scssファイル名] [cssファイル名] とコマンドを実行します。

$ ./node_modules/.bin/node-sass style.scss style.css
Rendering Complete, saving .css file...
Wrote CSS to /Users/utano320/Documents/Develop/hello-sass/style.css

style.css が作られました。

中身を確認してみます。

(style.css)

body {
  color: #333; }
  body h1 {
    color: #666; }

デフォルトのままだとインデントが見づらいですが、とりあえず CSS にコンパイルできてます。