CSS
stylus

Stylus入門したときのまとめ

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

参考にしたサイト