今までSass(SCSS）を使ってきた人が、はじめて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（SCSS記法)→Stylusへと移行するかもしれない方の参考になればと思います。