今までSass(SCSS）を使ってきた人が、はじめてStylusを使ってみた備忘録です。

Stylusとは？

プロジェクトにおけるSass（SCSS）事情

今までのプロジェクトでは、

という形態をとってきました。

なぜSCSS記法かと言うと、

これらの状況から『CSSの書き方＋便利に書ける！』という触れ込みでハードルを下げつつ、Sass（SCSS）とプロジェクトに馴染んで貰おうという狙いで採用しています。

一方で、

「そろそろ他のCSSプリプロセッサを試したい！」という欲求もあり、新プロジェクトではStylusを導入してみました。
実際に調査・実装してくれたのは、@m-shinozaki、@g-taguchiのお二人なので、自分は触ってみた所感を基本部分からまとめてみます。

##基本編

コードで比較すると以下のようになります。
実際にコードを書くと、この括弧やセミコロンを不要とした書き方の楽さだけで感動します。

SCSS

.sample {
    color: #f00;
    p {
        margin-bottom: 16px;
    }
}

Stylus

.sample
    color #f00
    p
        margin-bottom 16px

項目	SCSS記法	Stylus
変数	`$`と`:`と`;`が必要	`=`
親要素の参照	`&`	`&`

SCSS

// 変数
$black: #000;

// 親要素の参照
.sample {
    color: $black;
    &.box {
        background-color: #ccc;
    }
}

Stylus

// 変数
black = #000

// 親要素の参照
.sample 
    color black
    &.box
        background-color #ccc

項目	SCSS記法	Stylus
隣接セレクタ	`+`	`+`
直下セレクタ	`>`	`>`

SCSS

.sample {
    color: #000;
    + small {
        font-size: 10px;
    }
    > p {
        margin-bottom 16px
    }
}

Stylus

.sample 
    color #000
    + small
        font-size 10px
    > p
        margin-bottom 16px

項目	SCSS記法	Stylus
mixin	`@mixin`で定義 `@include`で呼び出し	@〜の記載不要

SCSS

// mixin
@mixin Set-box {
    padding: 10px;
}

.sample {
    @include Set-box; // mixin呼び出し
    background: #ccc;
}

Stylus

// mixin
Set-box()
    padding 10px

.sample
    Set-box()  // mixin呼び出し
    background #ccc

項目	SCSS記法	Stylus
extend	`@extend`で呼び出す	`@extend`で呼び出す
プレースホルダーセレクタ	`%`で定義	`$`で定義
※プレースホルダーセレクタを使用することで、コンパイル時に出力されなくなります

SCSS

// extend
%Set-box {
    padding: 10px;
}

.sample {
    @extend %Set-box; // extend呼び出し
    background: #ccc;
}

Stylus

// extend
$Set-box()
    padding 10px

.sample
    @extend $Set-box()  // extend呼び出し
    background #ccc

Stylus導入時、どのエディターを使う？という話題もあったので。

項目	Sass（SCSS）	Stylus	備考
SublimeText	◎	◎	メインで利用
Atom	◎	◎
Php(Web)Storm	◎	△	※１

個人的にAtomも併用していましたが、プロジェクト内での差分等は特に出ず、問題なく使えました
※１）Storm系では、Emmetを利用した記述では:がついてしまうので少し不便でした
- 実はStorm系でも使えるよなどありましたらツッコミお願いします

{}や:、;からの開放に、仕事が捗るようになった
- 上記記法はSASS記法でも実現できるので、いきなりStylusは…という場合はSASS記法の選択からでも良いかなと思います
Stylusに慣れたあとSCSS記法に戻ると{ }が！括弧が〜〜〜となるので要注意
- （他のプロジェクトも移行したい欲が湧きます）
Sass(SCSS）をStylusに変換するツールもあります（参考まで）
- sass to stylus

これからSass（SCSS記法)→Stylusへと移行するかもしれない方の参考になればと思います。