Toro_Unit

Sass から Stylus に移行しようと本気で決意しました。

Written by

Toro_Unit

in

CSSプリプロセッサを使い始めてだいぶ長いこと経ったような気がします。 最初に触ったのは、LESS でした。その次に Compass が便利ということで、Sass に移行したような記憶があります。

そして、Stylus いいなぁと思い始めて早4年以上経ちました。出会った頃からステキだなぁと思い続けてはいたのですが、Sass の方が普及してるし、Stylus を使うような人は Sass も触れるし・・・ということで、Sass を延々と使い続けていたんですが、ちょっと Stylus に移行しようと本気で考えています。

Stylus とは

Stylus は、node.js 製のCSS プリプロセッサです。リリースは2010年で、LESS や Sass より後発。

詳しい機能は、http://stylus-lang.com を参照すればすぐに解ると思います。

移行した理由

1. extend が便利。

たとえば、Media Object みたいなのって、HTML / CSS を書いていく上で出現頻度が高いとは思うんですが、結構細かいデザインの違いが発生したりします。

.media {
display: flex;
  &__figure {
    flex: 0 0 auto;
  }
}

出現頻度が高いと言うことは、そのぶんデザインのバリエーションも多いわけです。それに対応するために、BEM の Modifier を作ったりするのですが、Modifier が増えすぎてカオス化したりします。そして管理出来なくなって、似たようなモジュールが大量生産されて、結局 Media Object なんて存在しなかったんや・・・状態になったり。mixin を作りまくって解決するのも結局解りづらくするだけな気がしてます。結局、Media Object に依存するモジュールが出来てしまったりで、管理出来ないなぁと。

こんな感じで、別のモジュールに依存してしまったり、

<div class="media profile">
    <div class="media__figure"></div>
    <div class="media__body"></div>
</div>
.profile {
    .media__figure {
        
    }
}

もしくは

<div class="media profile">
    <div class="media__figure profile__figure"></div>
    <div class="media__body"></div>
</div>

こんな感じで、めちゃくちゃ冗長になったり、セレクタの管理が煩雑になったりしてました。

CSS を管理しやすくちゃんと設計しようってことなのに、結果、CSS がより使いづらくなった気がしてました。結局 HTML を書くときに、CSS側の依存関係を知らないとダメってのは非常に開発もメンテナンスもかったるい。

プログラミングにおけるクラスの継承みたいなことが出来たらだいぶステキかなーとぼんやり悩んでました。

要は、ある BEM でいうところのブロックを継承した、新たなブロックを作れたらだいぶすっきりするんじゃ無いかとってことです。

そこで、Stylus でこんなコードを書くと、

.media {
  display: flex;
  &__figure {
    width: 30%;
    flex: 0 0 auto;
  }
}

.profile {
  @extends .media;
  &__figure {
    width: 20%;
  }
}

こんな感じにコンパイルされました。

.media,
.profile {
display: flex;
}
.media__figure,
.profile__figure {
width: 30%;
flex: 0 0 auto;
}
.profile__figure {
width: 20%;
}

このおかげで、HTML側はすっきりこんな感じで書けます。

<div class="profile">
    <div class="profile__figure"></div>
    <div class="profile__body"></div>
</div>

非常にオブジェクト指向っぽく、解りやすくCSSが書けるんじゃ無いかと。

ちなみに LESS でも同じことは出来ますが、Stylus のほうが書き方がシンプル。

2. npm や gulp や grunt を当たり前のように使うようになった。

昔は、Compass 一択だった気がしますが、状況も変わってきましたし、ビルドタスクをちゃんと定義しておけば、ユーザーの環境などに依存せずにプリプロセッサなどが使えるようになりました。$ npm run build とかでビルドできるようにしておけば別に問題ないわけで。watch とかも、Compass 等を使わなくても、mikeal/watch や gulp.watch や、floatdrop/gulp-watch 等で片付くので、別に要らないんじゃ無いかと。

また、npm で normalize.css とかも取って来た際に、それを何も考えずに @import 出来たりするのも楽だなぁと。Sass でコンパイルしたのものを PostCSS等で @import を解決する等も出来ますが、それくらいはプリプロセッサ側でやっつけて欲しいなぁとは思います。Sass も SCSS 記法なら、CSS のスーパーセットなわけで。@import で CSS を取ってこれないのはすごいもやっとします。

これもやっぱり LESS でも出来たりします。

3. File globbing ができる

要は、 @import "dir/*" みたいな奴です。sass-globbing とかもありますが、やっぱり拡張文法なのでなんだかなーと。

感想

そもそも、プリプロセッサなんか使わなくてもCSSが書けるようになってくれれば良いんですが、まだまだそういった時代にはしばらくならなさそうですよね。PostCSS も autoprefixer 等使ってはいますが、CSS の文法を拡張してオレオレCSS方言を作るのは、結局面倒くさいことになる気しかしていないので、既存のプリプロセッサと仲良く付き合っていくのも大事だなと思う今日この頃です。

More posts