Sass

CSS書いていると頭が渋滞しがちだけど、これなら便利なのかも。ただ、コンパイルを手動でチェックしながらなのはめんどい。

SASSとは

Sass - Wikipediaというものらしい。
公式サイトはSass: Syntactically Awesome Style Sheetsですな。

利点

なぜSass推しなのかというと、CSS3 Patterns Galleryで見つけた模様を小さくしようとしたのですよ。

See the Pen Plaid without Sass by Laurel (@laurel-treetop) on CodePen.

数字指定が細かすぎて、直すのが面倒。
これをSassで変数設定して書いてあげると…

See the Pen Plaid with Sass by Laurel (@laurel-treetop) on CodePen.

$sizeの値を直せば、模様の伸縮自在になるわけです¹。
SCSS表示のときに右下のVIEW COMPILEDでScssとCssの切り替えができます。
今回はサンプルを持ってきたからややこしいのですが、自分で作るときに最初からSassで作っておけば便利かと。

色指定が楽になる、というのもあったり。

See the Pen SlimMenu Color Change by Laurel (@laurel-treetop) on CodePen.

ちょっと見るのに苦労すると思いますが、実はこれ、色を指定しているのは2箇所、メニューバーの基本になっている色と、テキストの色だけ。
あとは基本の色を明るくしたり彩度を上げ下げしたりで調整してある。

欠点

ブラウザがサクッと読んでくれるわけではなく、コンパイルが必要。
ということはコンパイラが必要。
コンパイラの環境構築が面倒。

環境構築

コンパイラをインストールする

…ってのは面倒くさい。なので次の方法で²。

オンラインエディタで編集

SassMeisterというのが便利。プレビューもあるし。
試しにさきほどのSassを突っ込んでみると、サイズが変更できるかと。
作ったやつはGistにSecret Gistとして保存しておけます。
https://www.sassmeister.com/gist/+gistのIDで開けます。
コードを貼り付けることもできますね。

Play with this gist on SassMeister.

ただ、かなりの確率で404 errorになるのですが、なんなんでしょ…?