HTMLやCSSをSmartに書くためのツール(Stylus編)
前回はJadeを使ってHTMLを簡単に完結に記述する方法を紹介しました。
今回はStylusというものを使ってCSSを簡単に完結に記述する方法を紹介します。
どのようにきれいになるのかまずは例をみてみましょう。下記のsample.cssは普通のCSSのコードです。下のsample.stylはsample.cssをStylusで書いたものです。
CSSのあの括弧とかセミコロンとかがなくなってすっごくきれいになりました!!
Stylusとは
StylusはSassやLessと同様であるCSSメタ言語の一つです。
特徴はLessやSassと同様にCSS内で変数が使えたり、Mixinsができたり、入れ子ができたら.......etc といろいろあるのですが
最大の特徴はコードをRubyっぽく書けるということです。
具体的にどういうことかというとLessやSassと違ってこんなことが出来ます。
- コロンが省略可能
- セミコロンが省略可
- カンマも省略可
- 波括弧{}は省略可
- 変数宣言もRuby構文
Stylusのインストール手順
インストールにはNodeのnpmを使います。次のコマンドでインストールは終了です。
$ npm install -g stylus
インストールされているかどうかの確認は「stylus -V」で可能です。
$ stylus -V
0.42.3
Stylusの使い方
- stylファイルを作成する。以下はサンプルです。
- 先ほど作成したstylファイルをコンパイルする。成功すると下のような感じになります。
$ stylus sample.styl
compiled sample.css - 出来たCSSファイルをHTMLで読み込むと使えます。
おまけ
Sublime Text 2でStylusのシンタックスハイライトを設定する
- Package用のディレクトリを作成し、そこにgitからJadeの設定をcloneする
$ mkdir -p ~/Library/Application\ Support/Sublime\ Text\ 2/Packages
$ cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages
$ git clone https://github.com/LearnBoost/stylus.git Stylus
- Sublime Text2 を再起動する
- View -> Syntax -> Stylusを選択する