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
のみで、記法を混在させることもできる。
変数と演算
変数に値を代入しておくことで、変数名で任意の場所から値を参照することができる。
base-color = #00a6fc
.title
color base-color
@
をつけると、直前のそのプロパティを参照することもできる。かっこ必要。
演算もできる。
.container
width 100%
.sidebar
width (@width * 0.3)
条件分岐と繰り返し
if / else 文
liquid = true
.hoge
if liquid
width 100%
else
width 960px
...
for / in 文
array = 1 2 3 4
for num in array
.mg-{num * 5}
margin num * 5px
1行目が 配列の定義。,(カンマ)区切ることもできる。また、 変数の展開は{}でできる。
パーシャル
Stylus でも Sassと同じように、ファイル名の前に _
を付けることで、コンパイル後に CSS ファイルが生成されない。また、Sassと違って、 @import
するときに_を省略することはできない。
@import '_setting'
.hoge
...
ミックスイン
ミックスインの定義と参照方法は以下の通り。
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 の機能もある。
.btn
...
...
.btn-blue
@extend .btn
background-color
ちなみに、 @extend
と @extends
のどっちでもいい。
Stylusを使ってみて
個人的に、Grunt や CoffeeScript、Jade、Yoeman、そして Stylus、フロント開発で使うツールをすべて npm で管理できるのはいいと思った。
Stylus は CSS と全く同じ記述で機能をラップできるので、@import
するファイルだけ作っておけば、生の CSS しか書けない人でも使うことができる。Sass か Less がプリプロセッサのデファクトになっている感はあるけど、Stylus という選択肢もありだと思う。