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

CSSの問題点

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

SCSSとは

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

CSSdiv{margin:0auto;}divp{padding:20px;}

Sassdiv{margin:0auto;p{padding:20px;}}

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

SASSとSCSS

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

SASSdivmargin:0autoppadding:20pxspanfont-color:red;

SCSSdiv{margin:0auto;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を扱うことができる機能です。