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

- リンク: https://torounit.com/blog/sass-%e3%81%8b%e3%82%89-stylus-%e3%81%ab%e7%a7%bb%e8%a1%8c%e3%81%97%e3%82%88%e3%81%86%e3%81%a8%e6%9c%ac%e6%b0%97%e3%81%a7%e6%b1%ba%e6%84%8f%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%e3%80%82/
- 公開日: 2016-08-05T07:04:28+09:00
- 作成者: Toro\_Unit

CSSプリプロセッサを使い始めてだいぶ長いこと経ったような気がします。 最初に触った
のは、[LESS](http://less-ja.studiomohawk.com/) でした。その次に [Compass](http://compass-style.org/)
が便利ということで、Sass に移行したような記憶があります。

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

## Stylus とは

[Stylus](http://stylus-lang.com/) は、node.js 製のCSS プリプロセッサです。リリース
は2010年で、[LESS](http://less-ja.studiomohawk.com/) や Sass より後発。

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

## 移行した理由

### 1. extend が便利。

たとえば、[Media Object](http://v4-alpha.getbootstrap.com/layout/media-object/) 
みたいなのって、HTML / CSS を書いていく上で出現頻度が高いとは思うんですが、結構細かい
デザインの違いが発生したりします。

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

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

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

    ```decode:true
    <div class="media profile">
        <div class="media__figure"></div>
        <div class="media__body"></div>
    </div>
    ```

    ```decode:true
    .profile {
        .media__figure {

        }
    }
    ```

もしくは

    ```decode:true
    <div class="media profile">
        <div class="media__figure profile__figure"></div>
        <div class="media__body"></div>
    </div>
    ```

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

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

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

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

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

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

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

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

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

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

    ```decode:true
    <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](https://github.com/mikeal/watch)
や [gulp.watch](https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb)
や、[floatdrop/gulp-watch](https://github.com/floatdrop/gulp-watch) 等で片付くので、
別に要らないんじゃ無いかと。

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

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

### 3. File globbing ができる

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

## 感想

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