Sassからの、はじめてのStylus

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

Stylusとは？

• Stylus - 公式サイト

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

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

• SCSS記法
• 拡張子は.scss
• 呼称はSass（さす）

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

なぜSCSS記法かと言うと、

• デザイナーもコーディングをするシーンがある
• でもコーディングがちょっと苦手だったりもする
• CSSなら基本的なものは組める（positionとかはちょっとごにょごにょ）

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

一方で、

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

Sass（SCSS）とStylusの比較

##基本編

項目	SCSS記法	Stylus
括弧{ }	必要	不要
コロン: セミコロン;	必要	不要
入れ子	{}と インデント	インデントのみ

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

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

mixin編

項目	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

extend編

項目	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とエディターについて

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

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

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

Stylusに触れてみての所感

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

最後に

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