SassとStylusについて

業務でStylusを使用することになったので、Stylusの書き方について、まとめてみました。

CSSの問題点

CSSは、HTMLでマークアップしたものを飾り付けることで、より意味を持たせるためのスタイル言語です。
これにより、PCの画面をHTMLだけのものに比較して様々な表現をすることが可能となりますが、CSSでは{}が必要だったりセミコロンが必要だったりと、多くの制約があることが事実としてあります。
その制約を取ることができないものか。
これを考えた末、SassとStylusが誕生しました。

SCSSとは

Sass（サス）とはCSSをより簡略的に、しかし多機能で書けるようにした記法です。
具体的に見てみましょう。

CSS
div {
    margin: 0 auto;
}

div p {
    padding: 20px;
}

Sass
div {
    margin: 0 auto;
    p {
        padding: 20px;
    }
}

上がCSS、下がSassとなります。
見てみると、Sassは入れ子構造でdivを一つにできているのがわかります。
このように、書き方を省略してもCSSと同じようにスタイリングすることができるのがSassの魅力です。

SASSとSCSS

少しわかりにくいですが、SassにはSASSとSCSSというふたつの記法が存在します。

SASS
div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red;

SCSS
div {
    margin: 0 auto;
    p {
        padding: 20px;
        span {
             font-color: red;
        }
    }
}

上がSASS、下がSCSSです。
実は先ほど紹介したSassはSCSSの記法であったことがわかります。
SASSが先に生まれ、SCSSが後にできているのですが、
どちらもネスト構造（入れ子構造）を作ることで、省略をしようとしていることがわかりますね。
ただ、そのアプローチがインデントを作ることであるか、{}をつくることであるか、という違いであると言えます。
SASSのほうがよりシンプルだと思うのですが、CSSとの連携に乏しかったこともあり、結局{}を持ったSCSSの記法が一般的になりました。

Sassはmixinが使える

ここで、少しSassの機能として、mixinに触れておきます。
CSSでは基本的には全ての値をスタイル時に決めておくことが必要で、動的に表示を変えたりすることが難しいという点がありました。
Sassはそれを改善するためにmixinという機能を搭載しています。
mixinとは、引数を使ってスタイルの設定ができる、いわばプログラミング言語的にCSSを扱うことができる機能です。

Stylusとは

CSSの書き方のひとつで、自由な書き方で書くことができます。
具体的には、

• CSSをそのまま書くことができる
• SCSSをそのまま流用することができる

というように、他の記法をそのまま使うことができます。

その中で、CSSだと {} などが必要となるところで、それが必要なく書くことができるところが便利なところです。

また、変数や引数を使用したりと、動的に書くことができるのも、Stylusの魅力であると言えます。

構造はインデントを使うことで階層を作ることができます。
書いていると、インデントがないと階層構造を作れないので、インデントがずれてしまうとその後の設計が全て狂ってしまうという事がありえます。

詳しくはまた後日付け加えようと思います。