今さらのStylus

この記事はCSS Advent Calendar 2016の22日目の記事です。

僕はStylusが好きです。

StylusとはNode.js製のCSSプリプロセッサです。
SassやLESSよりも後発ですが、その分機能も充実しています。（ドキュメントはあまりないですが…）
Sassで使える機能は大体使えます。（たまに使えないのもありますが…）

　Stylus

僕の会社ではStylusを使っているのですが、この前勉強会でLTした時にそのこと喋ったら「Stylus知らない」とか「案件でつかってるとこ初めて見た」とか散々な言われようでした。悲しい。

ということで、今日はStylusの好きなところを書いていきます。
これを読んでStylus使いが増えたらうれしいです。

@includeとか@ifとか書かなくて良い

僕が一番好きな部分です。Sassは@includeとかやたら@を書かせる印象がありますが、Stylusはそんなことないので、コードがスッキリします。これは大きいですね。

Sass

@mixin $sp {
  @media (max-width: 320px){
    @content;
  }
}

.hoge {
  @include $sp {
    width: 100%;
  }
}

@if $num == 1 {
  //処理
}

Stylus

$clearfix() {
  zoom 1
  &:after {
    content ""
    display block
    clear both
  }
}


$sp() {
  @media (max-width: 320px) { {block} }
}

.hoge {
  $clearfix();
  +$sp {
    width: 100%;
  }
}

if $num == 1 {
  //処理
}

CSSを直接読み込める

StylusはSass記法（セミコロンや括弧を省略する書き方）とscss記法（普通のCSSみたいな書き方）の両方が使えます。
なので、直接CSSを移植したり、 @import で読み込めたりするので既存のCSSを読み込まなきゃいけないときとか便利です。

Sassとかでもできるのかな？詳しい人教えてください。

ディレクトリ単位で読み込みができる

@import "../base/**/*" みたいな感じで、指定したディレクトリ配下のファイルを一括で読み込むことができます。地味に便利ですね。

プログラムちっくに書ける

僕はこの点が一番気に入ってます。
@を書かなくて良いことにくわえて、Styluでは変数を定義する特は = を使うので、プログラムっぽく書けます。

Stylusでfor文を書くとこんな感じになります。

types = apple grape pine peach

for type in types {
  .type-{type} {
    background-image: url('../img/img_'+type+'_.png');
  }
}

関数も作れます。

$aspectRatio(h = 4, w = 3) {
  position: relative;
  &:before {
    content: '';
    display: block;
    padding-bottom: unit(w / h * 100, '%');
  }
}

mixinにオブジェクトで設定を渡すことも出来ます。
プログラミング言語っぽくオブジェクト作れるのは結構便利で、よく使います。
(Sassではできるのかな…？)

$style($conf = {}) {
  $conf_default = {
    paddingLeft: 20px,
    fontSize: 14px,
    lineHeight: 24px,
  };
  $paddingLeft   = $conf.paddingLeft || $conf_default.paddingLeft;
  $fontSize      = $conf.fontSize || $conf_default.fontSize;
  $lineHeight    = $conf.lineHeight || $conf_default.lineHeight;

  padding-left: $paddingLeft;
  font-size: $fontSize;
  line-height: $lineHeight;
}

.hoge {
  $style($conf = {
    paddingLeft: 10px
  })
}

こう見るとかなりプログラムっぽく書けるのがわかると思います。

まとめ

Stylusはいいぞ。みなさんもぜひStylus使いましょう！