ざっと調べたAltCSSの現状と今後についてのメモ

# はじめに
最近、ちょくちょく目にするけどStylusってどうなん？
Sass使ってるけど乗り換えた方がええのん？
という世間話をキッカケに、ざっと調べて脱線していった時のメモです。


# Stylusとは


- Node製のCSSプリプロセッサ（AltCSS）
- node.jsのexpressや、jadeと同じ人が開発。
- SassやLessより後発で、2つの良いとこ取りをしていて機能も豊富（らしい）
- gulpのプラグインあり  
[gulp-stylus](https://www.npmjs.com/package/gulp-stylus)

---

- [Expressive, dynamic, robust CSS](http://stylus-lang.com/)


## 機能


- 記述方法
	- 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のように一目でわかる方が安心


## 参考
- [SASSよりもStylusが優れている6つのポイント](http://qiita.com/BYODKM/items/c1a51e3cb9884a7d4826)
- [Tokyo Otaku ModeがStylusを使う理由](http://blog.otakumode.com/2014/09/03/stylus/)



# libSass


- RubyではなくC/C++依存のSass  
→libsassをNodeで使えるようにした**node-sass**  
**gulp-sass**で動作（node-sassを内包）
- コンパイル速度はStylusと同等以上


## 要はNodeでSass
もうlibSassってる


## 今後の懸念点


- 現状、Ruby SassとlibSassに機能差はなくなっている
- 今後、Ruby Sassに新機能が先行実装される可能性  
- アップデートの内容とlibSassの実装タイミング次第で要検討？

---

- [Sass Compatibility](http://sass-compatibility.github.io/)



# PostCSS


Autoprefixerの作者が開発しているツール
- [GitHub - postcss/postcss: Transforming styles with JS plugins](https://github.com/postcss/postcss)


## 機能


### 必要なプラグインを選んで利用  
- 入れ子、変数、mixinなどが使えるようになるプラグイン
→Sassと同じようなことが可能になる

- [postcss/gulp-postcss](https://github.com/postcss/gulp-postcss)
- [autoprefixer](https://github.com/postcss/autoprefixer)
- minify, optimize系のプラグイン群：[cssnano](http://cssnano.co/)
- BabelのCSS版？プラグイン群：[cssnext](http://cssnext.io/)
→仕様が確定していないプラグインが多い、いっぱいあるけど使う？
→必要なプラグインを個別で使う方がよいかも
- [PostCSS.parts | A searchable catalog of PostCSS plugins](http://postcss.parts/)
- [2016/02/16追記] メディアクエリを一箇所にまとめる：[css-mqpacker](https://www.npmjs.com/package/css-mqpacker)


### コンパイルがlibSassより早い
現時点で最速


## 移行時の懸念点


### Sassのコードがそのまま使えないこともある  
プラグインや記述次第では移行時にトラブル


### 環境（プラグイン）整備や学習コスト  
学習コストは低いが、環境整備にはそれなりの手間。


### プラグインのバグなどのリスク  
Sassの方が実績があるので、今後に期待。


**本格的な普及（Sassも使わなくなる）はまだ先？**


## 参考
- [PostCSSとは何か](http://morishitter.hatenablog.com/entry/2015/08/03/164424)
- [PostCSSとcssnextで最新CSS仕様を先取り！](https://html5experts.jp/t32k/17235/)
- [gulpでPostCSSを使用してみる](http://yukihirai.hatenablog.com/entry/%3Fp%3D2803)
- [PostCSSの概要と書き方](http://note.mifuru.com/post/136948574054/postcss%E3%81%AE%E6%A6%82%E8%A6%81%E3%81%A8%E6%9B%B8%E3%81%8D%E6%96%B9)



# まとめ


## SassからStylusへの乗り換えは不要では
Sassに大きな不満はありません


## PostCSSのプラグインはチェック
Autoprefixer, cssnano以外も


## PostCSSの導入準備
- よいプラグインがあればすぐ使えるようにgulpの設定を見直し、SassとPostCSSを併用。  


- まずは、今のプロジェクトでautoprefixer, cssnano
- [2016/02/16追記] レスポンシブ対応をする機会は激減したけど、mqpackerも追加