CSSプリプロセッサ＝Sass(SCSS)とかLESSとかでCSSを生成してやると、複雑なCSSもシンプルで見通しのいいソースコード=CSSメタ言語から生成できます。
今回はそのCSSプリプロセッサを、例によってWindows10で使ってみましょう。
今、プリプロセッサって言いました？！ Sassだぁ！
いいえ、Stylusです。
古いStylusロゴの方が好き
メジャーどころのSassはWindowsではRuby実行環境もインストールする必要があります（MacだとRubyは最初から入ってるそうです）。またStylusはNode.js謹製のプリプロセッサでもある。GulpとかGrantとか、タスクランナーと組み合わせると便利らしいです。
ですが、いきなり全部やると大変ですし、ややこしいです。今回はコマンドラインからStylusでCSSをコンパイルしてみましょう。
Stylusを入れるにあたって、下準備が二つほど要ります。
- Windows PowerShellの実行モード変更
- Node.jsのインストール
その後、Node.jsの機能を使ってStylusをインストール、CSSのコンパイルを試します。
Windows PowerShellの設定
Node.jsは基本的にコマンドラインから使います。
だが、いにしえのコマンドプロンプトとは訣別しよう。Windows 7以降ならば、Windows PowerShellというコマンドラインが使えます。
Windows PowerShell、略称WPS。以下でもWPSと書けばWindows PowerShellのことを指します。
一旦、管理者として起動してWPSの実行モードを変更する。
Stylusコマンドを実行するだけなら、この設定変更は不要かも知れない。
私はWindows10 64bitを使用しているので、互換性のためかx86（32bit)のWPSもある。多分どちらでもいい。
起動したら、何か警告が出ている。
「セキュリティ上の問題があるので、WPSから実行できるスクリプトに制限をかけていますよ」とのこと。
WPSの実行制限モードを変更する。
> Set-ExecutionPolicy RemoteSigned
上記コマンドを入力。Yで続行。制限モードをRemoteSignedとして、ローカルで作成したスクリプトとリモートからは信頼できるスクリプトのみの実行とする。
再度、WPSを起動してみる。警告メッセージなし。
lsコマンドが使えるので、それだけでも乗り換える価値があります。
WPSはどの実行制限が妥当か、実は私では見当が付いてません。
下記サイトでは、Remote Signedが最適とのことです。企業だと社内ネットワークやPCのセキュリティポリシーなども関係してきます。詳しい人がいたら確認してみて欲しい。そして私にも教えて頂けると幸いです。
Remote Signed
- 実行ポリシーがRemote Singedに設定されている場合、ローカルで作成されたあらゆるPowerShellスクリプトを実行することが許される。リモートで作成されたスクリプトは、信頼できる発行元が署名したものしか実行できない。
PowerShellの使用方法｜Windows管理者のためのPowerShell
Node.jsのインストール
Google先生に聞くまでもありません、最短距離でNode.jsの公式サイトへ行きましょう。
Node.js公式サイト https://nodejs.org/en/
Windows用のインストーラである.msiファイルを用意してくれてます、多謝。
スクリーンショットでは、node-v4.4.5-x64.msi ファイルをダウンロードしています。
（バージョンは2016年6月現在）
ダウンロードしたファイルからインストール、以上。
WPSから
> node –v
でバージョンが確認できれば、Node.jsのインストールは一先ず完了です。
私のNode.js は4.0.0ですね。
Stylusのインストール
JavaScriptといえば、普段はWebサイトの表示をブラウザ側＝フロントエンドであれこれしてくれてますね。そんなJavaScriptをサーバーサイド≒PC側で動かして便利に使うぜ！というJavaScriptアプリケーションがNode.jsです。
で、そのアプリケーションパッケージの一つにStylusがあります（かいつまんだ説明）。
Stylusのインストールは、計2回行います。
グローバル・インストールと作業フォルダへのインストール。
1つ目のインストール
npm＝node package managerというNode.jsのパッケージ管理機能を使って、stylusをグローバル・インストールします。
グローバル・インストールすることで、WPSでどのフォルダにいてもstylusコマンドを呼び出せます。
WPSで使いたいプログラム名＝コマンド・オプション・対象を確認しつつ命令文を書きます。コピペでなく打ち込み推奨。
> npm intall –g stylus
-g オプションでグローバル・インストールになります。
インストール確認＆バージョン確認は
> stylus -V
グローバル・インストールは以上です。
次に、2つ目のインストール
作業フォルダへもインストール作業が必要です。
今回はユーザーフォルダのnew-projectで作業するとします。
> cd ~/
> cd \new-project
cd ~/ で ユーザーのホームへ移動、私のPCならC:\Users\akiyaに移動する。ある程度ファイル名を入力したらTabキーで候補が出る。
new-projectフォルダでnpm install を実行、この時は -g を付けない。
> npm install stylus
ログにWARN何とかが出ているかもしれませんが警告なので、一応問題はない。
Errorの場合はインストールが止まるはずです。
インストールが終わったらnew-projectフォルダにnode_moduleフォルダが増えます。
この中にJavaScriptライブラリやモジュールが沢山入っていて、コンパイル処理で呼び出されます。
もちろん、どこにnew-projectフォルダを置いてもいいし、作業フォルダの名前も好きに決められます。フォルダを作ったら作業フォルダへのインストールを忘れずに。
.stylファイルを書いてコンパイル
style.styl を次のように書いていたとして、CSSファイルをコンパイル（ソースコードから生成）してみます。
bright-h = #257bcc
.menu-item
color bright-h
display block
padding 0.2rem 1rem
border-left solid 3px #fff
&:hover
border-left solid 3px bright-h
& a:hover
text-decoration none
WPSからコンパイルを実行します。使いたいプログラム名と対象ファイルを指定して実行。
> stylus style.styl
成功すれば、たった1行 compiled style.cssと表示されます。あっさり。
コンパイル済みCSSはstyle.cssとして、同じフォルダに保存されます。この辺は実行時オプションで指定フォルダへ出力など可能です。
あえて、Stylusファイルをタイポ（ミスタイプ）してコンパイル・エラーを発生させてみます。
「パースエラー 6行目24文字目 ：があったんじゃない？」
とのことですが、5行目に { があるために、パース＝構文解析の辻褄が合わなくてコンパイルが中断されました。
その後にエラーを出したモジュールがズラズラっと表示されます。
style.stylファイルを修正しましょう。Node.js、Stylus双方ともに何も変更されませんし、問題もありません。
生成されたCSSファイルの中身は下記の通り。
.menu-item {
color: #257bcc;
display: block;
padding: 0.2rem 1rem;
border-left: solid 3px #fff;
}
.menu-item:hover {
border-left: solid 3px #257bcc;
}
.menu-item a:hover {
text-decoration: none;
}
例えば、stylファイルではbright-h = #257bcc と16進数を色名に格納しておきます。
Styleファイルの4行目11行目ではcolor+色名で指定しておくと、コンパイル後のCSSでは16進数に展開されています。
実は、このコードはサイトのトップページのCSSの一部です。
グローバルメニューのリンクは、ホバーの時に文字色と同じ色の3pxの左ボーダーを表示する、という指定です。
このようにShirohanadaテーマはStylファイルからstyle.cssを生成しています。
Stylusは単体アプリケーションとしても機能が豊富です。
Styleファイルへの変更を検知して自動でコンパイルしたり、
ベンダープレフィックスを付けるライブラリを使ったり、
ブラウザのインスペクタ（要素を調査）からStylファイルの何行目のスタイルが当たってるか分かったり…
素敵な機能が備わりまくりですが、実は私も使い切れてません。
この記事を書くために、改めてコマンドライン=CLIからStylusを使ってみた感触では、Node.js+Stylusだけでテーマ用のstyle.cssの作成はできそう。
なので、次回「StylusをCLIで使う」へ続く！
参考にしたサイト
Stylusを使ってみる | アカベコマイリ
SASSよりもStylusが優れている6つのポイント | Qiita
