はじめに
最近、ちょくちょく目にするけどStylusってどうなん？
Sass使ってるけど乗り換えた方がええのん？
という世間話をキッカケに、ざっと調べて脱線していった時のメモです。
Stylusとは
- Node製のCSSプリプロセッサ（AltCSS）
- node.jsのexpressや、jadeと同じ人が開発。
- SassやLessより後発で、2つの良いとこ取りをしていて機能も豊富（らしい）
- gulpのプラグインあり
gulp-stylus
機能
- 記述方法
- scss記法, sass記法（インデントベース）可
- 拡張子.stylでは記法を混在させることも可能
→混在反対
- 変数
- 演算
- 条件分岐
- 繰り返し
- パーシャル（_でコンパイル時にcssを生成させない）
- mixin, extend
など
本質的な部分はSassと変わらなそう（それはそうですよね）
Stylusを使うメリット
柔軟性が高い記法
body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px
- 波括弧、セミコロン、コロンまで省ける
- もちろん、従来通りの書き方も可能
- RubyやCoffeeScriptなどのようにタイプ数が少なくて済む
- 上記に慣れているプログラマーは書きやすい？
- タブ（インデント）で親子関係がスムーズに変更可
環境構築が楽
Nodeで動くのでRubyが不要
コンパイルが早い
平均的にRuby Sassの倍くらい早い
変数やmixinが透過的に使える
まるでプロパティがごとし
fonts = helvetica, arial, sans-serif
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
body {
padding: 50px;
font: 14px/1.4 fonts;
}
a.button
border-radius: 5px
移行時の懸念点
情報量が少ない
Sassと比べると日本語の情報が少ない
わざわざ乗り換えるほどではなさそう
新規でAltCSSを選ぶ環境ならアリ
学習コストと慣れが必要
社内はみんなSassで慣れてる
個人的な所感
記法
- 慣れるまでが大変そう
- そこまで省く必要があるのか（可読性下がりそう）
- インデントのズレで無駄にバグりそう
- ルール決めが大変（戦争は嫌です）
環境構築とコンパイル速度
libSassを使っているので大差なし
透過的mixinなど
- 埋もれてわかりにくいのでは
- Sassのように一目でわかる方が安心
参考
libSass
- RubyではなくC/C++依存のSass
→libsassをNodeで使えるようにしたnode-sass
gulp-sassで動作（node-sassを内包） - コンパイル速度はStylusと同等以上
要はNodeでSass
もうlibSassってる
今後の懸念点
- 現状、Ruby SassとlibSassに機能差はなくなっている
- 今後、Ruby Sassに新機能が先行実装される可能性
- アップデートの内容とlibSassの実装タイミング次第で要検討？
PostCSS
Autoprefixerの作者が開発しているツール
機能
必要なプラグインを選んで利用
-
入れ子、変数、mixinなどが使えるようになるプラグイン
→Sassと同じようなことが可能になる -
minify, optimize系のプラグイン群：cssnano
-
BabelのCSS版？プラグイン群：cssnext
→仕様が確定していないプラグインが多い、いっぱいあるけど使う？
→必要なプラグインを個別で使う方がよいかも -
[2016/02/16追記] メディアクエリを一箇所にまとめる：css-mqpacker
コンパイルがlibSassより早い
現時点で最速
移行時の懸念点
Sassのコードがそのまま使えないこともある
プラグインや記述次第では移行時にトラブル
環境（プラグイン）整備や学習コスト
学習コストは低いが、環境整備にはそれなりの手間。
プラグインのバグなどのリスク
Sassの方が実績があるので、今後に期待。
本格的な普及（Sassも使わなくなる）はまだ先？
参考
まとめ
SassからStylusへの乗り換えは不要では
Sassに大きな不満はありません
PostCSSのプラグインはチェック
Autoprefixer, cssnano以外も
PostCSSの導入準備
-
よいプラグインがあればすぐ使えるようにgulpの設定を見直し、SassとPostCSSを併用。
-
まずは、今のプロジェクトでautoprefixer, cssnano
-
[2016/02/16追記] レスポンシブ対応をする機会は激減したけど、mqpackerも追加