Node.jsのインストール

Stylus（スタイラス） は Node.js のモジュールとして動作します。Node.jsのサイト よりNode.jsをダウンロードします。
INSTALL をクリックするとお使いのOSなどを自動で判別してそれに合ったインストーラをダウンロード出来ますが、ご自分で選びたい場合は DOWNLOADS をクリックしてください。

ダウンロードしたインストーラを起動してインストールを行います。

Next をクリックします。

I accept the terms in the License Agreement にチェックを入れて Next をクリックします。

Finish をクリックします。

Node.jsがインストールされているか確認

node -v

コマンドプロンプト （Macの場合はターミナル）を開き上記のコマンドを実行します。

v0.8.17

バージョン情報が表示されれば、Node.jsのインストールは正しく完了しています。

Stylusのインストール

npm install stylus -g

次にパッケージ管理ツール npm のコマンドを使って、Stylusのモジュールのインストールを行います。
上記コマンドを実行します。
-g オプションをつけてインストールすると、グローバルインストールというらしくパスの設定まで行なってくれるので便利です。

無事インストールが終わると、以下のようなログが吐かれます。

C:\Users\tsuyohsi>npm install stylus -g
npm http GET https://registry.npmjs.org/stylus
npm http 200 https://registry.npmjs.org/stylus
npm http GET https://registry.npmjs.org/stylus/-/stylus-0.32.0.tgz
npm http 200 https://registry.npmjs.org/stylus/-/stylus-0.32.0.tgz
npm http GET https://registry.npmjs.org/cssom
npm http GET https://registry.npmjs.org/mkdirp
npm http GET https://registry.npmjs.org/debug
npm http 200 https://registry.npmjs.org/debug
npm http GET https://registry.npmjs.org/debug/-/debug-0.7.0.tgz
npm http 200 https://registry.npmjs.org/mkdirp
npm http GET https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.4.tgz
npm http 200 https://registry.npmjs.org/cssom
npm http GET https://registry.npmjs.org/cssom/-/cssom-0.2.5.tgz
npm http 200 https://registry.npmjs.org/debug/-/debug-0.7.0.tgz
npm http 200 https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.4.tgz
npm http 200 https://registry.npmjs.org/cssom/-/cssom-0.2.5.tgz
C:\Users\tsuyohsi\AppData\Roaming\npm\stylus -> C:\Users\tsuyohsi\AppData\Roaming\npm\no
de_modules\stylus\bin\stylus
stylus@0.32.0 C:\Users\tsuyohsi\AppData\Roaming\npm\node_modules\stylus
├── debug@0.7.0
├── cssom@0.2.5
└── mkdirp@0.3.4

グローバルインストールでない場合カレントのパスにインストールされるようです。

グローバルインストールの場合は以下のようになりました。

• Windows7・・・C:\Users\ユーザ名\AppData\Roaming\npm\node_modules\stylus
• Mac OS X Mountain Lion・・・ /usr/local/lib/node_modules/stylus

ちなみにMacでグローバルインストールを行う場合、以下のように sudo コマンドを使用しました。

sudo npm install stylus -g

インストールエラーが出る場合

プロキシサーバを利用されている方は、上記コマンドを打つ前に以下のコマンドを実行してみてください (※以下はWindowsの例、アドレスとポートと番号の部分はご自身の環境に置き換えてください)。

set http_proxy=http://プロキシサーバのアドレス:ポート番号

Stylusがインストールされているか確認

stylus -V

コマンドプロンプト を開き上記のコマンドを実行します。

0.31.0

バージョン情報が表示されれば、Stylusのインストールは正しく完了しています。

拡張子stylファイルを作成する

Stylusのファイルを作成してみましょう。
拡張子は styl であることに注意してください。

test.styl

fonts = helvetica, arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

このファイルを Cドライブの直下 に保存しました。

stylファイルのコンパイル

stylus c:\test.styl

コマンドプロンプト を開き上記のコマンドを実行します。

すると同ディレクトリに test.css というコンパイルされたCSSファイルが作成されます。

test.css

body {
  padding: 50px;
  font: 14px/1.4 helvetica, arial, sans-serif;
}