npmでミニマムに始めるSass

This post was originally posted in Qiita at 12/27 2015.

GitHub Pagesでいくつか静的なWebページを作成しているのですが、生のcssではなく、sassでcssを作成することにしました。

sassを使おうとして、調べるとgemでsassをインストールして始めるという記事が見つかります。

また、Compassというものも出てきたりします。

またフロントエンドの環境などについて知っていたりすると、gruntやgulpといったタスクランナーも使えるんじゃないかと思ったりして、それらでsassを使う方法も出てきたりします。

ふむふむ、といった感じで記事を読んだりするのですが、やらないといけないことやルール、覚えないといけないことが多くて、結局どうするのがいいのだろうと迷ってしまいました。

gruntやgulpは確かに便利ですが、ミニマムに始めるにはちょっとやることが多い気がしたり、一週間後に見た時にどうやるか忘れてる自信もあります。 ミニマムにやる方法を調べる中たどり着いたのが、npmのrun scriptを使うという方法です。

npm

npmについては以下の記事がわかりやすいです。

npmはnode.jsで書かれたツールのパッケージマネージャで、gruntやbowerもnpmでインストールします。Grunt/Gulpで憔悴したおっさんの話によると、”Node.js/npmに関する知識とかUNIXに関する知識は、数ヶ月で変わることもない＂ので、npmでやるのが簡単そうです。

始める

先に大まかな流れを書くと以下のようになります。 npmのみを使うので、シンプルです。

  • nodeをインストールする
  • npmでsassのコンパイルに必要なツール、ファイルの監視に必要なツールをインストールする
  • npm run scriptでsassをコンパイルする

では、サンプルを用いて詳細を書きます。

環境

使用している環境は以下です。

  • OS: OSX 10.11.2 El Capitan
  • パッケージマネージャ: homebrew 0.9.5

node.jsのインストール

homebrewでnode.jsをインストールします。 $ brew install node

プロジェクトを作る

例として、Webサイト用のディレクトリをデスクトップに作成します。ここでは、mysiteというディレクトリにします。

$ mkdir ~/Desktop/mysite && cd ~/Desktop/mysite

npmの初期設定を行います。 $ npm init

いろいろ聞かれますが、とりあえずエンター。

sass用のディレクトリ scss 、sassをコンパイルした後にcssを出力する用のディレクトリ cssを作成します。 $ mkdir scss css

ソースをgitで管理する場合に、npmを使用した際に作成されるnode_moduleは不必要なので、gitで管理しないように.gitignoreを作成します。

$ touch .gitignore

.gitignoreに関しては、GitHubによって公開されている.gitignoreリポジトリのNode.gitignoreを参考にするといいと思います。

次にscssファイルを作成します。

$ touch style.scss

以上でプロジェクトの構成は終了です。

npmでツールをインストールする

sassのコンパイルに必要なツール node-sass と、ファイルの更新管理に使用するツール nodemon をnpmでインストールします。

$ npm install -D node-sass nodemon

sassをコンパイルする

npmを使用するとpackage.jsonというファイルができていますが、その中のscriptsの部分に、sassコンパイル用のscript, 監視用のscriptを記述します。

"scripts": {
  "build-css": "node-sass --include-path scss scss/style.scss css/style.css",
  "watch-css": "nodemon -e scss -x \"npm run build-css\""
}

build-css, watch-cssの部分を npm run の後に書くことで、コマンドを実行できます。

npm run build-css コマンドを実行すると scss/style.scss が css/style.css にコンパイルされ、 npm run watch-css コマンドを実行するとscssの変更が監視されます。

style.scssにコードを書いて、コンパイルします。

$my-color: #3d3d3d;

body {
  color: $my-color;
}

$ npm run build-css

これで、css/style.css が作成され、以下のようなファイルができると思います。

body {
  color: #3d3d3d;
}

シンプルに

上記のように、nodeの使い方以外を知らなくても、sassを使用する環境を整えることができ、比較的シンプルなのではないかと思っています。 sassライフが捗りそうです。

おまけ

nodeを使えばローカルサーバーも簡単に立ち上げられます。

local-web-serverを使用します。

$ npm install -D local-web-server

package.json

"scripts": {
  "build-css": "node-sass --include-path scss scss/style.scss css/style.css",
  "watch-css": "nodemon -e scss -x \"npm run build-css\"",
  "ws": "ws"
}

$ npm run ws

エンジニアリング npm sass github pages

関連記事