Edited at

Stylus入門したときのまとめ

More than 1 year has passed since last update.

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 という選択肢もありだと思う。


参考にしたサイト