Stylus

StylusをCLIで使う

以前書いた、「Node.jsをStylusを使う」でStylusを使えるようになったので、実際に使ってみましょう。
Stylusだけで、CSSコンパイルに便利な機能が一通り揃っています。
その辺をCLI=コマンドライン・インタフェースから使ってみます。
例によってWindows10ですので、Windows PowerShellでの例を紹介します。
Stylusファイルの書き方、文法はStylus公式のドキュメントを。
Extend、Mixinの使い方はポストCSSの解説サイトか書籍を。
それぞれ参照して下さい。
コンパイルについては基本的にはStylusのヘルプに書いてあります。

stylus -h

このヘルプを見ながら、下記をやっていきます。

  1. package.jsonを作成してStylusをインストール
  2. 出力先を指定してコンパイル
  3. 複数ファイルから単一CSSを生成
  4. Nibライブラリを使う
  5. SourceMapの生成
  6. Watch機能で自動コンパイル

package.jsonを作成してStylusをインストール

まず下準備をします。前回は単純にStylusだけ入れましたが、NibというStylus用ライブラリも今回は入れます。
Stylusだけでなくパッケージを追加で入れるので、何のパッケージのVerいくつを使っているのか、packege.jsonというファイルに記録するようにします。
今回は、StylusとStylus用ライブラリNibの二つだけですが、いくつものNode.jsパッケージを使うプロジェクトであっても基本は変わりません。この際なので、やってみましょう。
まず、練習用のプロジェクトフォルダを作ります。
エクスプローラから作成しておいてもかまいません。

> mkdir new-project
> cd new-project

プロジェクトフォルダへ移動して初期設定を行います。

> npm init
Press ^C at any time to quit.
>

一つずつ、この項目はどうする?という風に対話的に入力します。
ctrl+c 押せばいつもキャンセルできるよ」とも。
今回は下記のようにしています。

name: (new-project) plactice-stylus-cli
version: (1.0.0)
description: Stylus CLIの練習用プロジェクト
entry point: (index.js)
test command:
git repository:
keywords:
author: Akiya
license: (ISC)

package.jsonのスクリーンショット
何も入力しないで Enterでデフォルト設定が入ります。今回はversionやlicenseは何も入力せず、デフォルトとしました。
これでpackage.jsonが作成されました。
npmコマンドでStylusをインストールします。オプション–save-devを付けて実行。

> npm install --save-dev stylus

同様に、Stylus用ライブラリ Nibをインストール。

> npm install --save-dev nib

完了時に、インストールされたパッケージの一覧が表示されます。
Stylus/Nibのインストール完了スクリーンショット
package.jsonをテキストエディタで開いてみましょう。
lisenceの下に、new-projectフォルダにインストールしたnibとstylusの情報が追記されています。
node-moduleフォルダがなくなっても、package.jsonに基づいて再インストールしたりできます。

"devDependencies": {
   "nib": "^1.1.0",
   "stylus": "^0.54.5"
}

これでインストール作業は完了です。Stylusコマンドを使っていきましょう。
package.jsonについてはこちらのページを参考にしました。

参考ページ
Qiita | npmでnode.jsのpackageを管理する

出力先を指定してコンパイル

ファイル名のみ指定してstylusファイル=.stylをコンパイルすると、元のstylファイルと同じフォルダへコンパイルされます。
ディレクトリを指定しての出力は、ヘルプによれば、

-o, –out <dir> Output to <dir> when passing files

「-o または –out の後に出力先フォルダ」です。
menu.stylからCSSファイルをコンパイルし、「CSS」というフォルダへ出力してみます。
出力先フォルダはあらかじめ作成しておいて下さい。

> stylus menu.styl -o ./css

何かエラーが出て、コマンド入力が出来ない状態で止まってしまったら、ctrl+cでキャンセルコマンドを送ってみて下さい。
例えば、stylファイルを指定し忘れると、コマンドラインは処理中になったままとなります(Windows PowerShellの場合)。
キャンセル時のWPSスクリーンショット
キャンセルするかWindows PowerShellに聞かれますので、Y と打つとコマンド入力へ戻ります。
コンパイル完了で、cssフォルダ内にmenu.cssが生成されます。
コンパイル後のVimスクリーンショット
stylファイルだけを集めたstylフォルダを作って、そこからcssフォルダへコンパイルする場合をやってみます。

new-project
│  package.json
│  style.css
│
├─css
│     -> ここにCSSを出力したい
│
└─styl
       -> ここのstylファイルをコンパイルして

cdコマンドでstylフォルダへ移動しておきます。-o ../css で「一つ上の階層のフォルダ内のcssフォルダ」となります。
実行するコマンドは下の通り。

styl > stylus menu.styl -o ../css
compiled ..\css\menu.css
styl >

「compiled」が表示されればコンパイル完了です。コンパイル後のファイル構成は下図。
stylフォルダからCSSフォルダへ出力したVimスクリーンショット

複数ファイルから単一CSSを生成

Stylusには複数のStylusファイルから一つのCSSにコンパイルする機能があります。コンポーネントやセクション毎にスタイルを書いて、一つのCSSファイルに結合することで、スマートかつDRYに一つのCSSファイルを生成することができます。是非使いましょう。
stylフォルダに配した3つのファイルから単一のCSSを生成してみます。

new-project
│  package.json
│  style.css
│
├─css
│     ここへ単一のCSSを出力
│
└─styl
       style.styl
       color.styl
       front-page.styl

このままコンパイルすると、全てのStyleファイルがコンパイルされるので、コンパイルしないファイル名の先頭に_(アンダーバー)を付けておきます。

_color.styl
_front-page.styl
style.styl

こうしておくと、Stylusによるコンパイル対象からは外れます。
コンパイルするstyle.stylファイルにインポート宣言を書きます。
style.styl コンパイルしたい単体ファイルの中身。

/* 色名-16進数の定義ファイルをインポート */
@import “_color”
/* ヘッダーのスタイル */
h1,h2,h3
         font-size 1.62rem
         color shirohanada
         margin 2rem 0 1rem
         padding-left .75rem
         border-left solid 3px shirohanada
         clear both
/*フロントページのスタイルをインポート  */
@import “_front-page”

_color.styl  このファイルには色名-16進数を変数として宣言します。

/* Color Declaration */
shirohanada = #a3d8f6
nakano-hanada = #436fb4

_front-page.styl フロントページ用のスタイル

.menu-item
         color nakano-hanada
         display block
         padding 0.2rem 1rem
         border-left solid 3px #fff
.banner
         border-radius 10px

styleとfront-pageでの色指定はcolor.stylで定義した色名のみを書きます。
あとは、style.stylをコンパイルするだけです。

styl > stylus style.styl -o ../css

下記の/css/style.cssがコンパイルされます。
front-page.stylで指定した色名までcolorで宣言した16進数に置き換わります。
style.css コンパイル後、コメントは掲載時に削除

h1,
h2,
h3 {
   font-size: 1.62rem;
   color: #a3d8f6;
   margin: 2rem 0 1rem;
   padding-left: 0.75rem;
   border-left: solid 3px #a3d8f6;
   clear: both;
}
.menu-item {
   color: #436fb4;
   display: block;
   padding: 0.2rem 1rem;
   border-left: solid 3px #fff;
}
.banner {
   border-radius: 10px;
}

この方法を使えば、Stylファイルを分割しながら、見通しよくスタイルを書いていくことができます。

Nibライブラリを使う

Styluには Nib というライブラリが用意されています。メジャーなSassではCompassという強力なライブラリがあるそうです。
Nibも同様に多機能なライブラリです。その一部であるベンダープレフィックスの自動付与を試してみます。自分もこのぐらいしか、使えておりません。
Nibライブラリを使用するには、Styleファイルでのインポート宣言と、コンパイル時のオプション指定を組み合わせます。
まず、style.stylにインポート宣言を追記。

@import “nib”

そして、コンパイル時の指定。再度マニュアルを見てみましょう。

-u, –use <path>     Utilize the Stylus plugin at <path>

Stylusプラグインを使う際は「-uか–useのあとにパス 指定したパスのプラグインを利用する」とのこと。
Nibは作業フォルダにインストール済みなので、nibとだけ指定します
コンパイルのコマンド全体は-uオプションを追加して、このようになります。

styl > stylus style.styl -o ../css -u nib

stylファイルのソース
.banner
   border-radius 10px

コンパイル後

style.css
.banner {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

border-radiusだけだと、あまりありがたみが感じられませんね。
flex-box(WebクリエイターズBOXより)だと下記のように展開されます。
stylファイル

article
     dixplay flex
     flex-warp wrap

コンパイル済みCSS

article {
   display: -webkit-box;
   display: -moz-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: box;
   display: flex;
   -webkit-box-lines: multiple;
   -moz-box-lines: multiple;
   -o-box-lines: multiple;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

他にもグラデーションの記述が簡単になったり、ClearFixクラスも入ってたり、色々できるようです。

SourceMapの生成

この項ではとりあえず生成してみましょう。
HTMLのサンプルも必要ですので、今回はこのサイトのテーマ、Shirohanadaで説明します。
例によってマニュアルを見ます。

-m, –sourcemap    Generates a sourcemap in sourcemaps v3 format

「-m –sourcemap   v3フォーマットSourceMapの生成」
至ってシンプルですね。このオプションを付けて実行すると次のようになります。

  1. 出力先フォルダにstyle.css.mapファイルを生成
  2. CSSの末尾に /*# sourceMappingURL=style.css.map */ を自動追記

この二つが揃うとブラウザでスタイルを見たときにいいことがあります。
Firefoxの「要素を調査」やChromeの「検証」を行った際に、通常はこのようにCSSの行番号で表示されます。
サンプルはこのサイトのテーマ+WordPressのテーマ作成用テストデータです。
SourceMapなしでインスペクション
テーマ用style.cssは下記の8ファイルから生成しています。

.
├─bin
├─fonts
├─images
├─node_modules
│
├─stylus
│      editor-style.styl
│      style.styl
│      _color.styl
│      _comment-form.styl
│      _front-page.styl
│      _icon-color.styl
│      _icon-font.styl
│      _sanitize.styl
│      _variables-font-icon.styl
│
├─style.css
├─index.php
.

つまり、スタイルを修正しようと思ったら、この8つのStylファイルに書いているスタイル指定を修正、再コンパイルする必要があります。
そこでSourceMapを生成しておきます。するとブラウザのインスペクション(要素を調査/検証)での表示が変わります。
SourceMapありでインスペクション
SourceMapがあれば、インスペクションで元のソースコードであるStylファイルの情報を表示してくれます。
上の例では、h2タグには二つのファイルのスタイルが当たっていることが分かります。

  1. front-page.styl 130行目 66行目 = マージンなど
  2. style.styl 307行目 266行目 = フォントサイズ、色

コンパイル済みCSSとソースのStylファイルの対応関係=マップがSourceMapです。
元々はJavaScriptの検証のための仕組みだそうですが、CSSプリプロセッサでも使えるようになっています。
これで、ブラウザでスタイルをチェック・検討しながらスタイルを当てていくのが楽にできます。
ただし注意があります。

検証用のファイルなのでSourceMapはリリースファイルに含めない。

Watch機能で自動コンパイル

ファイルを監視して、保存された際に自動でStylusコマンドが走るようにします。
例によって、-hでヘルプを読みます。

-w, –watch  Watch file(s) for changes and re-compile

「-w –watch  変更と再コンパイルのためにファイルを監視」
よって、ファイル監視までの全部入りコマンドは次の通り。

styl > stylus style.styl -o ../css -u nib -m -w

Watch開始時のログ
Watching とログが出れば、監視スタートです。
Watchの前に一度、コンパイルを通します。通らない場合はエラーで止まります。
Stylファイルを変更して保存します。
コンパイルしたログ
2回コンパイルを通して、終了させました。
Watchを終わらせたい時は、ctrl+cでキャンセルコマンドを送ります。

最後に

以上、Stylus一つでかなりの範囲をカバーしてくれているのが分かると思います。
ShirohanadaテーマもGulpであれこれ繋いでやってました。Stylusが全部入りなのを知って、全てCLIでやってみたところ、gulp.jsは不要でした。「CSSコンパイルだけに大げさじゃないか?」と思っていたので、WatchまでやってくれるStylusは助かります。またWindows10の私の環境では、Node.js 4.0.0 + Gulp 3.9.1 + Watchを使っているとメモリ周りでエラー吐いて止まってしまったりと、不安定でした。
今はテーマに関しては、Gulpは使わず、stylusコマンドだけでCSSの自動コンパイルをやっています。
CSSプリプロセッサはSassがメジャーですけども、私はStylusがイチオシです。
また、簡単なのでコマンドラインの習得にも良いと思います。

Node.jsを入れてStylusを使う

CSSプリプロセッサ=Sass(SCSS)とかLESSとかでCSSを生成してやると、複雑なCSSもシンプルで見通しのいいソースコード=CSSメタ言語から生成できます。

今回はそのCSSプリプロセッサを、例によってWindows10で使ってみましょう。
今、プリプロセッサって言いました?! Sassだぁ!
いいえ、Stylusです。

stylus-old-logo.png

古いStylusロゴの方が好き

メジャーどころのSassはWindowsではRuby実行環境もインストールする必要があります(MacだとRubyは最初から入ってるそうです)。またStylusはNode.js謹製のプリプロセッサでもある。GulpとかGrantとか、タスクランナーと組み合わせると便利らしいです。

ですが、いきなり全部やると大変ですし、ややこしいです。今回はコマンドラインからStylusでCSSをコンパイルしてみましょう。
Stylusを入れるにあたって、下準備が二つほど要ります。

  1. Windows PowerShellの実行モード変更
  2. Node.jsのインストール

その後、Node.jsの機能を使ってStylusをインストール、CSSのコンパイルを試します。

Windows PowerShellの設定

Node.jsは基本的にコマンドラインから使います。
だが、いにしえのコマンドプロンプトとは訣別しよう。Windows 7以降ならば、Windows PowerShellというコマンドラインが使えます。
Windows PowerShell、略称WPS。以下でもWPSと書けばWindows PowerShellのことを指します。
一旦、管理者として起動してWPSの実行モードを変更する。
Stylusコマンドを実行するだけなら、この設定変更は不要かも知れない。
wps-from-start.png
私はWindows10 64bitを使用しているので、互換性のためかx86(32bit)のWPSもある。多分どちらでもいい。
wps01.png
起動したら、何か警告が出ている。
「セキュリティ上の問題があるので、WPSから実行できるスクリプトに制限をかけていますよ」とのこと。
WPSの実行制限モードを変更する。

> Set-ExecutionPolicy RemoteSigned

上記コマンドを入力。Yで続行。制限モードをRemoteSignedとして、ローカルで作成したスクリプトとリモートからは信頼できるスクリプトのみの実行とする。
wps02.png
再度、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ファイルを用意してくれてます、多謝。
nodejs-msi.jpg

スクリーンショットでは、node-v4.4.5-x64.msi ファイルをダウンロードしています。
(バージョンは2016年6月現在)
ダウンロードしたファイルからインストール、以上。
WPSから

> node –v

でバージョンが確認できれば、Node.jsのインストールは一先ず完了です。
私のNode.js は4.0.0ですね。
node-v.png

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で作業するとします。
project-folder.png

> cd ~/
> cd \new-project

cd ~/ で ユーザーのホームへ移動、私のPCならC:\Users\akiyaに移動する。ある程度ファイル名を入力したらTabキーで候補が出る。
new-projectフォルダでnpm install を実行、この時は -g を付けない。

> npm install stylus

npm-install-2.png
ログにWARN何とかが出ているかもしれませんが警告なので、一応問題はない。
Errorの場合はインストールが止まるはずです。
インストールが終わったらnew-projectフォルダにnode_moduleフォルダが増えます。
この中にJavaScriptライブラリやモジュールが沢山入っていて、コンパイル処理で呼び出されます。
node-modules-explore.png
もちろん、どこに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と表示されます。あっさり。
compiled
コンパイル済みCSSはstyle.cssとして、同じフォルダに保存されます。この辺は実行時オプションで指定フォルダへ出力など可能です。
あえて、Stylusファイルをタイポ(ミスタイプ)してコンパイル・エラーを発生させてみます。
compile-error
「パースエラー 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進数に展開されています。
diff-styl-css.png
実は、このコードはサイトのトップページのCSSの一部です。
グローバルメニューのリンクは、ホバーの時に文字色と同じ色の3pxの左ボーダーを表示する、という指定です。
2016-06-12_15h34_32.png
このようにShirohanadaテーマはStylファイルからstyle.cssを生成しています。
Stylusは単体アプリケーションとしても機能が豊富です。
Styleファイルへの変更を検知して自動でコンパイルしたり、
ベンダープレフィックスを付けるライブラリを使ったり、
ブラウザのインスペクタ(要素を調査)からStylファイルの何行目のスタイルが当たってるか分かったり…
素敵な機能が備わりまくりですが、実は私も使い切れてません。
この記事を書くために、改めてコマンドライン=CLIからStylusを使ってみた感触では、Node.js+Stylusだけでテーマ用のstyle.cssの作成はできそう。
なので、次回「StylusをCLIで使う」へ続く!

参考にしたサイト
Stylusを使ってみる | アカベコマイリ
SASSよりもStylusが優れている6つのポイント | Qiita

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