TECH BOX

Technology developer's blog

この記事は1年以上経過しています

Stylusノススメ。


2017年06月30日

ウェブサイト制作の現場で今やCSSはプリプロセッサを使って書くことが当たり前になりました。
もしまだCSSで頑張っている人は効率化を図るためにプリプロセッサを使いましょう。

さて、そんなプリプロセッサですが、皆さん何を使っていますか?
自分はLess -> Sass(SASS) -> Stylusと変遷していき、現在Stylusを愛用しています。
世界ではSass(SCSS)がメジャーなのは知ってますが、なぜStylusなのか。
一言で言えば柔軟性です。

他のプリプロセッサの記法やCSSそのものとの親和性が高いので積極的に押したいプリプロセッサです。

Stylus:http://stylus-lang.com/

メリット

StylusはSassなどで出来ることももちろんできますが、それ以外にも様々なメリットがあります。

Node.js製

StylusはNode.jsを利用したプリプロセッサなのでコンパイルが早い。
SassはRuby製なので導入も面倒だけどStylusの場合は導入コストは低い。
(最近はSassもNode.jsでコンパイルする事が可能らしいですが)

記法の柔軟性による学習コストが低い

Stylusは記法が柔軟性に富んでます。
CSSやSass(SCSS)と同じようにも書けますし、Sass(SASS)と同様に{};を省略できますし、むしろ:も省略できます。

// CSS記法
.foobar {
  color: #000;
}

// SCSS記法
.foobar {
  color: #000
}

// SASS記法
.foobar
  color: #000

// stylus独自の記法
.foobar
  color #000

上記は全て動作します。
混在していても問題ありません。
CSSしか書いたことがない人や他のプリプロセッサから乗り換える場合の学習コストは一番低いでしょう。
※ただし、プロジェクトごとに記法のルールは統一したほうがいいでしょう
※個人的には視認しやすいSASS記法を愛用しています(Emmetで展開するとstylus独自の記法で書かれてしまうのが難点ですが・・・)

CSSファイルをインポートできる

プラグインなどを使う場合にCSSも読み込む必要があったりします。
Stylusなら.cssファイルを.stylファイル内で展開できます。
※コンパイル時のオプションinclude csstrueにしておく必要あり

入れ子、変数、四則演算、条件分岐、Mixin、Functionなど

他のプリプロセッサ同様これらを利用することができます。
変数や四則演算はもはや必須です。
当然、BEMなんかのCSS設計にも対応しやすいです。

//===入れ子===//
.foobar
  background: #fff
  .abc
    color: #000

// ↓コンパイル後
.foobar {
  background: #fff;
}
.foobar .abc {
 color: #000;
}

//===ルート展開===//
.foobar
  background: #fff
  &-abc
   color: #000

// ↓コンパイル後
.foobar {
  background: #fff;
}
.foobar-abc {
  color: #000;
}

プロパティの値を継承できる

プリプロセッサといえば変数ですが、Stylusでは変数の他にプロパティの値を継承することができます。

.foobar
  width: 100px
  height: @width
  &-abc
    width: @width

// ↓コンパイル後
.foobar {
  width: 100px;
  height: 100px;
}

.foobar-abc {
  width: 100px;
}

@プロパティ名で値を継承することができます。
例えばborder-leftとborder-rightのみ同じ値にしたい時などに有用です。

変数を使えばいい?
構文が一つ増えるだけで無駄ですよね。
継承が可能ならプロパティの値を継承するほうがスマートです。

拡張が可能

Stylusコンパイル時に独自拡張を行うことができます。
Stylus内でもfunctionを作成できますが、例えばNode.jsを利用して計算する必要があったりする場合に自分で拡張することが出来ます。

自分の場合はSassのときにあったimage-urlという画像パスを自動的に解決してくれる関数をStylusでも実現できるように独自関数を作成しています。
画像サイズを取得するimage-sizeは用意されているのにパスを解決する関数がないのはなぜなんだと思わないでもない。

デメリット

当然ながらデメリットもあります。
ただ、メリットの方が大きいです。

カオスになりやすい

Stylusは記法が柔軟すぎてカオスになりやすい。
これは、プロジェクトごとに記法を統一することで解決できる問題だと思ってます。

IEのfilterでコケることもある

IE用にfilterを書くとコンパイルに失敗することがある。
例えばfilter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);←こういうの。

一手間掛ければ解決はできるけど、最初はパニックになる。
(unquote('filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);')とすればいいと公式に書かれている)

似た例ではcalcの中で変数を展開できなかったり。
s()を使って置き換えればいいのですが(s('calc(100% - %s)', ($foobar + 10px)))。
s()はいろんな言語に実装されているsprintfの事

プロパティを変数として使うことができてしまう

stylusの場合は$を付けなくても変数として利用することができます。
参考:http://stylus-lang.com/docs/variables.html

つまり、自分が何の変数を作ったのか分からなくなることもあります。
$なしの変数は作らない、もしくはFunctionなどクロージャの中でのみ使うなどでこの問題は解決可能です。


ベンダプレフィックスを自動で行なってくれるAutoprefixerなどのプラグインを導入すればさらに無駄なことを書かなくて済むようになります。
自分はAutoprefixerやメディアクエリを一箇所にまとめるmqpackerなどを一括でやってくれるpleeeaseを愛用してます。

まだプリプロセッサを使ったことがないとか何を使おうか迷っている人は是非Stylusを使ってみて下さい。

Stylus:http://stylus-lang.com/

Write a commets