Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

この記事は 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

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

.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と同じ記法が使えるようになりました。 

BYODKM
TypeScriptばかり書いています / インターネッツ合同会社・代表 / 共著書に『HTML5読本』
https://github.com/BYODKM
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした