Sass(sccs) のコンパイルは node-sass がRuby不要でシンプルかつ高速!

Netbeansで Ruby Sass を使う方法を以前に紹介していたのですが、スタイルをちょっと変更したいという方には環境構築に結構手間もかかるし敷居が高かったかも知れません

NetBeans8にSASS/SCSSとcompassを導入
NetBeans8でSASS/SCSSとcompassの導入手順を紹介します。 SASSバージョンによってエラーとなる場合や、日本語を使用する場合の注意点についても紹介します (^^)…

そこで、PHP等のプログラムは編集しないけれど Sassでスタイルや色をカスタマイズしたいという場合に、もっと手軽な方法も紹介できればと思っていました

最近では、ATOM、Brackets,Visual Studio Code(VSCode)のような無料で高機能なエディターを使うことが出来るし、Sass カスタマイズも出来るらしいのやってみました (^^)

エディターの好みはそれぞれあると思いますが、この3つの中では(ちょっと触っただけですが)VSCode が最初から Markdown や Emmet にも対応しているうえに動作も軽快で一番印象がよかったので、VSCodeを使って scss ファイルをコンパイルして css ファイルに変換する迄の手順を2回にわけて紹介したいと思います

今回はその為の準備として Node.js の node-sass モジュールを使えるように構築して、コマンドラインから node-sass が使えるところまでを紹介します

ちなみに Windows7 を使っている場合の手順です

Node.js インストール

Node.js をwindows で使用する場合にインストールやバージョン切り替え等の管理を行うことが出来る Nodist というツールがあるので、これを利用してインストールしてみます

直接 Node.js のインストーラを使ってインストールしてもかまいませんが、バージョン切り替えできると便利な場合もありますので、お好きな方法でインストールを行って下さい

marcelklehr/nodist
nodist – Natural node.js and io.js version manager for windows.

現在の安定バージョン NodistSetup-v0.7.2.exe をダウンロードして実行します

インストーラの案内に従って実行していけばOKですが、私の場合は Windows7 64bit 環境なので、x64 を選択してインストールしました

インストールが完了したら、追加された環境情報を認識させるためにWindowsから1回ログアウトして、再ログインし直します

その後、コマンドプロンプトから引き続き作業を行います

※コマンドプロンプトからの作業は、文字化けする場合があるので、Windows のコマンドウィンドウよりも 日本語表示可能な bash 等を使うのがお勧めです

Nodist インストールバージョン確認

nodist -v

コマンドラインから nodist -v と入力すれば、0.7.2 と表示されるはずです

インストール可能な node.js のリスト表示

nodist dist

一覧リストが表示されたと思いますが、今回は最新の 5.7.0 をインストールしてみます

ダウンロードとインストール

nodist + v5.7.0

指定したバージョンの node.js がダウンロードされてインストールされます(まだ使用バージョンへの切り替えは行われていません)

Global バージョンの設定

nodist 5.7.0

node.js のバージョン切り替えを行います

node バージョン確認

node -v

V5.7.0 と表示されれば node.js が使える状態になっています

Nodist を使っておけば、バージョンのインストールや 切り替え管理が楽に出来ます (^^)

※nodist の使い方は、GitHub の nodist ページ を参照して下さい

node-sass モジュール

node-sass は、Sass(Ruby)のスタイルシートプリプロセッサの C言語バージョン LibSass を Node.js で使用できるようにしたライブラリモジュールで、高速に scss ファイルをコンパイルして css ファイルに変換することが出来ます

node-sass
Wrapper around libsass

インストール

npm install -g node-sass

コマンドラインから npm パッケージマネージャーを使い node-sass をグローバルにインストール

$ npm install -g node-sass
npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated graceful-fs@1.2.3: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
C:\Program Files\Nodist\bin\node-sass -> C:\Program Files\Nodist\bin\node_modules\node-sass\bin\node-sass

> node-sass@3.4.2 install C:\Program Files\Nodist\bin\node_modules\node-sass
> node scripts/install.js

Binary downloaded and installed at C:\Program Files\Nodist\bin\node_modules\node-sass\vendor\win32-x64-47\binding.node

> spawn-sync@1.0.15 postinstall C:\Program Files\Nodist\bin\node_modules\node-sass\node_modules\spawn-sync
> node postinstall


> node-sass@3.4.2 postinstall C:\Program Files\Nodist\bin\node_modules\node-sass
> node scripts/build.js

` C:\Program Files\Nodist\bin\node_modules\node-sass\vendor\win32-x64-47\binding.node ` exists.
 testing binary.
Binary is fine; exiting.
C:\Program Files\Nodist\bin
└─┬ node-sass@3.4.2
  ├── async-foreach@0.1.3
  ├─┬ chalk@1.1.1
  │ ├─┬ ansi-styles@2.2.0
  │ │ └── color-convert@1.0.0
  │ ├── escape-string-regexp@1.0.5
  │ ├─┬ has-ansi@2.0.0
  │ │ └── ansi-regex@2.0.0
  │ ├── strip-ansi@3.0.1
  │ └── supports-color@2.0.0
  ├─┬ cross-spawn@2.1.5
  │ ├─┬ cross-spawn-async@2.1.9
  │ │ └─┬ lru-cache@4.0.0
  │ │   ├── pseudomap@1.0.2
  │ │   └── yallist@2.0.0
  │ └─┬ spawn-sync@1.0.15
  │   ├─┬ concat-stream@1.5.1
  │   │ └── typedarray@0.0.6
  │   └── os-shim@0.1.3
  ├─┬ gaze@0.5.2
  │ └─┬ globule@0.1.0
  │   ├─┬ glob@3.1.21
  │   │ ├── graceful-fs@1.2.3
  │   │ └── inherits@1.0.2
  │   ├── lodash@1.0.2
  │   └─┬ minimatch@0.2.14
  │     └── lru-cache@2.7.3
  ├── get-stdin@4.0.1
  ├─┬ glob@5.0.15
  │ ├─┬ inflight@1.0.4
  │ │ └── wrappy@1.0.1
  │ ├── inherits@2.0.1
  │ ├─┬ minimatch@3.0.0
  │ │ └─┬ brace-expansion@1.1.3
  │ │   ├── balanced-match@0.3.0
  │ │   └── concat-map@0.0.1
  │ ├── once@1.3.3
  │ └── path-is-absolute@1.0.0
  ├─┬ meow@3.7.0
  │ ├─┬ camelcase-keys@2.0.0
  │ │ └── camelcase@2.1.0
  │ ├── decamelize@1.1.2
  │ ├─┬ loud-rejection@1.3.0
  │ │ ├── array-find-index@1.0.1
  │ │ └── signal-exit@2.1.2
  │ ├── map-obj@1.0.1
  │ ├── minimist@1.2.0
  │ ├─┬ normalize-package-data@2.3.5
  │ │ ├── hosted-git-info@2.1.4
  │ │ ├─┬ is-builtin-module@1.0.0
  │ │ │ └── builtin-modules@1.1.1
  │ │ └─┬ validate-npm-package-license@3.0.1
  │ │   ├─┬ spdx-correct@1.0.2
  │ │   │ └── spdx-license-ids@1.2.0
  │ │   └─┬ spdx-expression-parse@1.0.2
  │ │     └── spdx-exceptions@1.0.4
  │ ├── object-assign@4.0.1
  │ ├─┬ read-pkg-up@1.0.1
  │ │ ├─┬ find-up@1.1.0
  │ │ │ └── path-exists@2.1.0
  │ │ └─┬ read-pkg@1.1.0
  │ │   ├─┬ load-json-file@1.1.0
  │ │   │ ├── graceful-fs@4.1.3
  │ │   │ ├─┬ parse-json@2.2.0
  │ │   │ │ └─┬ error-ex@1.3.0
  │ │   │ │   └── is-arrayish@0.2.1
  │ │   │ ├── pify@2.3.0
  │ │   │ └─┬ strip-bom@2.0.0
  │ │   │   └── is-utf8@0.2.1
  │ │   └─┬ path-type@1.1.0
  │ │     └── graceful-fs@4.1.3
  │ ├─┬ redent@1.0.0
  │ │ ├─┬ indent-string@2.1.0
  │ │ │ └─┬ repeating@2.0.0
  │ │ │   └── is-finite@1.0.1
  │ │ └── strip-indent@1.0.1
  │ └── trim-newlines@1.0.0
  ├─┬ mkdirp@0.5.1
  │ └── minimist@0.0.8
  ├── nan@2.2.0
  ├─┬ node-gyp@3.3.0
  │ ├─┬ fstream@1.0.8
  │ │ └── graceful-fs@4.1.3
  │ ├─┬ glob@4.5.3
  │ │ └── minimatch@2.0.10
  │ ├── graceful-fs@4.1.3
  │ ├─┬ minimatch@1.0.0
  │ │ ├── lru-cache@2.7.3
  │ │ └── sigmund@1.0.1
  │ ├─┬ nopt@3.0.6
  │ │ └── abbrev@1.0.7
  │ ├─┬ npmlog@2.0.2
  │ │ ├── ansi@0.3.1
  │ │ ├─┬ are-we-there-yet@1.0.6
  │ │ │ └── delegates@1.0.0
  │ │ └─┬ gauge@1.2.7
  │ │   ├── has-unicode@2.0.0
  │ │   ├─┬ lodash.pad@4.1.0
  │ │   │ ├── lodash.repeat@4.0.0
  │ │   │ └── lodash.tostring@4.1.1
  │ │   ├── lodash.padend@4.2.0
  │ │   └── lodash.padstart@4.2.0
  │ ├─┬ osenv@0.1.3
  │ │ ├── os-homedir@1.0.1
  │ │ └── os-tmpdir@1.0.1
  │ ├─┬ path-array@1.0.1
  │ │ └─┬ array-index@1.0.0
  │ │   ├─┬ debug@2.2.0
  │ │   │ └── ms@0.7.1
  │ │   └─┬ es6-symbol@3.0.2
  │ │     ├── d@0.1.1
  │ │     └─┬ es5-ext@0.10.11
  │ │       └── es6-iterator@2.0.0
  │ ├─┬ rimraf@2.5.2
  │ │ └─┬ glob@7.0.0
  │ │   └── minimatch@3.0.0
  │ ├── semver@5.1.0
  │ ├─┬ tar@2.2.1
  │ │ └── block-stream@0.0.8
  │ └─┬ which@1.2.4
  │   ├─┬ is-absolute@0.1.7
  │   │ └── is-relative@0.1.3
  │   └── isexe@1.1.2
  ├─┬ npmconf@2.1.2
  │ ├─┬ config-chain@1.1.10
  │ │ └── proto-list@1.2.4
  │ ├── ini@1.3.4
  │ ├── semver@4.3.6
  │ └── uid-number@0.0.5
  ├─┬ request@2.69.0
  │ ├── aws-sign2@0.6.0
  │ ├─┬ aws4@1.2.1
  │ │ └── lru-cache@2.7.3
  │ ├─┬ bl@1.0.3
  │ │ └─┬ readable-stream@2.0.5
  │ │   ├── core-util-is@1.0.2
  │ │   ├── isarray@0.0.1
  │ │   ├── process-nextick-args@1.0.6
  │ │   ├── string_decoder@0.10.31
  │ │   └── util-deprecate@1.0.2
  │ ├── caseless@0.11.0
  │ ├─┬ combined-stream@1.0.5
  │ │ └── delayed-stream@1.0.0
  │ ├── extend@3.0.0
  │ ├── forever-agent@0.6.1
  │ ├─┬ form-data@1.0.0-rc3
  │ │ └── async@1.5.2
  │ ├─┬ har-validator@2.0.6
  │ │ ├─┬ commander@2.9.0
  │ │ │ └── graceful-readlink@1.0.1
  │ │ ├─┬ is-my-json-valid@2.13.1
  │ │ │ ├── generate-function@2.0.0
  │ │ │ ├─┬ generate-object-property@1.2.0
  │ │ │ │ └── is-property@1.0.2
  │ │ │ ├── jsonpointer@2.0.0
  │ │ │ └── xtend@4.0.1
  │ │ └─┬ pinkie-promise@2.0.0
  │ │   └── pinkie@2.0.4
  │ ├─┬ hawk@3.1.3
  │ │ ├── boom@2.10.1
  │ │ ├── cryptiles@2.0.5
  │ │ ├── hoek@2.16.3
  │ │ └── sntp@1.0.9
  │ ├─┬ http-signature@1.1.1
  │ │ ├── assert-plus@0.2.0
  │ │ ├─┬ jsprim@1.2.2
  │ │ │ ├── extsprintf@1.0.2
  │ │ │ ├── json-schema@0.2.2
  │ │ │ └── verror@1.3.6
  │ │ └─┬ sshpk@1.7.4
  │ │   ├── asn1@0.2.3
  │ │   ├─┬ dashdash@1.13.0
  │ │   │ └── assert-plus@1.0.0
  │ │   ├── ecc-jsbn@0.1.1
  │ │   ├── jodid25519@1.0.2
  │ │   ├── jsbn@0.1.0
  │ │   └── tweetnacl@0.14.1
  │ ├── is-typedarray@1.0.0
  │ ├── isstream@0.1.2
  │ ├── json-stringify-safe@5.0.1
  │ ├─┬ mime-types@2.1.10
  │ │ └── mime-db@1.22.0
  │ ├── node-uuid@1.4.7
  │ ├── oauth-sign@0.8.1
  │ ├── qs@6.0.2
  │ ├── stringstream@0.0.5
  │ ├── tough-cookie@2.2.1
  │ └── tunnel-agent@0.4.2
  └─┬ sass-graph@2.1.1
    ├─┬ glob@6.0.4
    │ └── minimatch@3.0.0
    ├── lodash@4.5.1
    └─┬ yargs@3.32.0
      ├─┬ cliui@3.1.0
      │ └── wrap-ansi@1.0.0
      ├─┬ os-locale@1.4.0
      │ └─┬ lcid@1.0.0
      │   └── invert-kv@1.0.0
      ├─┬ string-width@1.0.1
      │ ├─┬ code-point-at@1.0.0
      │ │ └── number-is-nan@1.0.0
      │ └── is-fullwidth-code-point@1.0.0
      ├── window-size@0.1.4
      └── y18n@3.2.0

ワーニングが出ていますが、インストールできたようです

※LibSass の互換性に関しては sass-compability を参照して下さい。私の使用範囲では、特に問題はありませんでしたが、 Compass を使用できるかどうかは不明です。使用している場合は修正が必要になるかもしれません

ここまでで node-sass を使うのに必要な環境は構築できました

それぞれのバージョンは画面のようになりました

node-sass-version

Node.js は、使ったことがなくよくわかっていないのですが、とりあえず今まで使っていた Ruby と Sass が Node.js と node-sass に置き換わったと思って下さい

Node.js は、サーバー環境で注目されていましたが、最近ではエディターでサポートされていることも多くいろいろな形で利用されているようなので少しずつ勉強しようと思っています (^^)

Sassファイルの用意

動作確認用に簡単な scss ファイルを用意しても良いのですが、せっかくなので私が公開している WordPress の Celtis_s テーマで使用している scss ファイルを css に変換してみましょう

下記ページのダウンロードから最新の celtis_s をダウンロードして適当な場所に解凍して下さい

WordPressテーマ : Celtis_s
WordPress テーマ Celtis_s について紹介しています。特徴やオプション設定、Tips等さまざまな関連情報のまとめページです (^^)

node-sass コマンドラインを使ってみる

node-sass sass/style.scss style.css

celtis_s を解凍したフォルダーでコマンドウィンドウもしくは bash を起動してコマンドラインから上記コマンドを入力してみてください

node-sass-execute

このように表示されれば、scss ファイルをコンパイルして css ファイルに変換できたこととなります

何かエラーがでた場合は、入力文字に間違えがないかよく確認して下さい

 

node-sass は、コマンドラインから様々なオプションを指定して実行することが出来ます

オプションは node-sass ページ で紹介されています

    -w, --watch                Watch a directory or file
    -r, --recursive            Recursively watch directories or files
    -o, --output               Output directory
    -x, --omit-source-map-url  Omit source map URL comment from output
    -i, --indented-syntax      Treat data from stdin as sass code (versus scss)
    -q, --quiet                Suppress log output except on error
    -v, --version              Prints version info
    --output-style             CSS output style (nested | expanded | compact | compressed)
    --indent-type              Indent type for output CSS (space | tab)
    --indent-width             Indent width; number of spaces or tabs (maximum value: 10)
    --linefeed                 Linefeed style (cr | crlf | lf | lfcr)
    --source-comments          Include debug info in output
    --source-map               Emit source map
    --source-map-contents      Embed include contents in map
    --source-map-embed         Embed sourceMappingUrl as data URI
    --source-map-root          Base path, will be emitted in source-map as is
    --include-path             Path to look for imported files
    --follow                   Follow symlinked directories
    --precision                The amount of precision allowed in decimal numbers
    --importer                 Path to .js file containing custom importer
    --functions                Path to .js file containing custom functions
    --help                     Print usage info

Sass(Ruby)と微妙に違う指定だったり、ちょっと良くわからないものもありますが (^_^;)

主なものをいくつか紹介します

ファイル変更監視 -w

node-sass を -w を付けて実行しておくと、対象ファイルが変更されると自動的に実行されます

node-sass-watch

出力フォーマット –output-style

css ファイルのフォーマットは nested / expanded / compact / compressed から選択できます

nested インデントを使って階層化したネスト形式
expanded セレクタとプロパティを階層化せずに展開した形式
compact セレクタとプロパティを同一行にしたコンパクトな形式
compressed インデントや改行を取り除きサイズを圧縮した形式
ソースマップ –source-map

Chrome 等の source map に対応したブラウザで scss ファイルの対象行を表示するためのマップファイルの生成

sass-source-map

マップファイルがあるとセレクタを定義している scss ファイルの対象行が確認出来ます (^^)

ちなみにこれらのオプションを指定した場合は下記のようになります

node-sass -w --source-map true --output-style compressed sass/style.scss style.css

以上

node-sass を使える環境を構築してみました

このままでも、結構便利に使えると思いますが、黒い画面は使いたくないと言う方もいるかもしれませんので、次回は VSCode エディターから node-sass を使って scss ファイルをコンパイルする方法を紹介したいと思います

では

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss