SASSよりもStylusが優れている6つのポイント

この記事は CSS Advent Calender 2014 の14日目です。BYODKM が書きました。

1）生のCSSファイルが読み込める・書ける

Stylus

@import "../../bower_components/normalize.css/normalize.css"

.foo {
  color: red;
}

2）SASS のコードが流用できる

SASS

p
    margin: 1em 0
    line-height: 1.5

上のコードはそのままStylusにコピペできます。さらに短く書きたければ、コロンを省略することも。

Stylus

p
    margin 1em 0
    line-height 1.5

100行書くと100タイプも省エネできるので、「コロンなし」は結構ヤミつきになります。

3）&が使いやすい

SASS（SCSS）の場合...

.block {
  foo: value
  @at-root {
    #{&}__element {
      bar: value
      @at-root {
        #{&}--modifier {
          baz: value
        }
      }
    }
  }
}

Stylusだと、

.block
  foo value

  &__element
    bar value

    &--modifier
      baz value

で、出力される内容はどっちも同じ。¹

.block                    { foo: value; }
.block__element           { bar: value; }
.block__element--modifier { baz: value; }

4）透過的にMixinが使える

SASSの場合...

@import "bourbon"

.box
    +size(100px)
    +clearfix()

Stylusだと、

@import "kouto-swiss"

.box
    size 100px
    clear fix

StylusならネイティブのプロパティかのようにMixinを扱えます。

5）変数が透過的にも使える

SASSの場合...

$red: #ff00c6

.foo
    color: $red

Stylusだと、

red = #ff00c6

.foo
    color red

一体これの何が大きく違うのかというと、まず以下のような生CSSのコードがあるとします。

body {
    color: gray;
    font-size: medium;
    font-family: sans-serif;
}

SCSSやStylusならこのままコンパイルすることができますが、Stylusではさらに変数を加えることができます。

gray       = #333
medium     = 14px
sans-serif = unquote('Arial, sans-serif')

body {
    color: gray;
    font-size: medium;
    font-family: sans-serif;
}

既存のコードには一切手を加えず、コンパイル後の内容を変更することができます。

6）環境構築が楽

Stylusの利用にはNode.jsのインストールだけでOK。Rubyの環境構築は不要です。
Stylusの作者がNode界の巨匠なだけに、そこは必然的に。

まとめ

実務でもバリバリ使っていますが、Stylus（日本語訳）オススメですよ！

1. .scssではなく.sassの方なら、v3.3からStylusと同じ記法が使えるようになりました。 ↩