Sassと比べると日本語の情報が少ないと感じたので、Stylusを始めるときに、 最低限これだけ知っておきたい 書き方をまとめてみた。
Stylusとは
Stylus は Node.js 製の CSS プリプロセッサ-。Express、Jade (Pug) と同じ人が開発してる。Sass と Less より後発で、2つの良いとこ取り をしていて、機能も豊富（らしい）。
インストールは npm から
$ npm install -g stylus
記述は SCSS 記法のように、CSS っぽい書き方と
.hoge {
color: red;
&:hover {
color: blue;
}
}
SASS 記法のように、インデントベースの記述もできる。: や ; も省略可能。せっかくなのでこの記法で書いてみた。
.hoge
color red
&:hover
color blue
```
CSS っぽい書き方とインデントの書き方ができるが、拡張子は `.styl` のみで、記法を混在させることもできる。
## 変数と演算
変数に値を代入しておくことで、変数名で任意の場所から値を参照することができる。
```sass
base-color = #00a6fc
.title
color base-color
```
`@` をつけると、直前のそのプロパティを参照することもできる。かっこ必要。
演算もできる。
```sass
.container
width 100%
.sidebar
width (@width * 0.3)
```
## 条件分岐と繰り返し
### if / else 文
```sass
liquid = true
.hoge
if liquid
width 100%
else
width 960px
...
```
### for / in 文
```sass
array = 1 2 3 4
for num in array
.mg-{num * 5}
margin num * 5px
```
1行目が **配列の定義**。,（カンマ）区切ることもできる。また、 **変数の展開**は{}でできる。
## パーシャル
Stylus でも Sassと同じように、ファイル名の前に `_` を付けることで、コンパイル後に CSS ファイルが生成されない。また、Sassと違って、 `@import` するときに_を省略することはできない。
```sass
@import '_setting'
.hoge
...
```
## ミックスイン
ミックスインの定義と参照方法は以下の通り。
```sass
box-sizing(arg)
-webkit-box-sizing arg
-moz-box-sizing arg
box-sizing arg
.hoge
box-sizing border-box
```
Sass のように、 `@mixin` とか `@include` とか付けなくてもいい。ミックスインを参照しているところを見ると、プロパティと同じように使えている（ **透過的mixin** ）。
Stylusでは、 **CSSと全く同じ記述方法で抽象化**することができる。
## 継承（extend）
Stylus には、extend の機能もある。
```sass
.btn
...
...
.btn-blue
@extend .btn
background-color
```
ちなみに、 `@extend` と `@extends` のどっちでもいい。
## Stylusを使ってみて
個人的に、Grunt や CoffeeScript、Jade、Yoeman、そして Stylus、フロント開発で使うツールをすべて npm で管理できるのはいいと思った。
Stylus は CSS と全く同じ記述で機能をラップできるので、`@import` するファイルだけ作っておけば、生の CSS しか書けない人でも使うことができる。Sass か Less がプリプロセッサのデファクトになっている感はあるけど、Stylus という選択肢もありだと思う。
## 参考にしたサイト
- [公式サイト](http://learnboost.github.io/stylus/)
- [Stylus ドキュメント日本語訳](https://github.com/enja-oss/stylus)
- [Stylusが目指すCSSプリプロセッサ](http://sssslide.com/speakerdeck.com/ahomu/stylusgamu-zhi-sucsspuripurosetusa)