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構文

公式ホームページはこちら

f:id:pgpg-sou:20140402192819p:plain

Stylusのインストール手順

インストールにはNodeのnpmを使います。次のコマンドでインストールは終了です。

$ npm install  -g stylus 

 インストールされているかどうかの確認は「stylus -V」で可能です。

$ stylus -V

0.42.3

 Stylusの使い方

  1. stylファイルを作成する。以下はサンプルです。
  2. 先ほど作成したstylファイルをコンパイルする。成功すると下のような感じになります。

    $ stylus sample.styl
       compiled sample.css

  3. 出来たCSSファイルをHTMLで読み込むと使えます。

おまけ

Sublime Text 2でStylusのシンタックスハイライトを設定する

  1.  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

  2. Sublime Text2 を再起動する
  3. View -> Syntax -> Stylusを選択する

f:id:pgpg-sou:20140402192132p:plain