Stylus入門したときのまとめ

  • 181
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

Sassと比べると日本語の情報が少ないと感じたので、
Stylusを始めるときに、 最低限これだけ知っておきたい書き方をまとめてみた。

Stylusとは

Stylusはnode製のCSSプリプロセッサ。
node.jsのexpressや、jadeと同じ人が開発してる。
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と全く同じ記述で機能をラップできるので、includeするファイルだけ作っておけば、生のCSSしか書けない人でも使える。
SassかLessがプリプロセッサのデファクトになってる感はあるけど、Stylusという選択肢もありだと思う。

参考にしたサイト