ZIZO DESIGN ノート

お問い合わせ

SASS(サース)

sass

Hamlの設計者であるHampton Catlin(ハンプトン・キャトリン)が設計し、Nathan Weizenbaum(ネイサン・バイゼンバウム)が開発したものです。て、Wikiに書いてました。

変数、ネスティング、Mixins、インラインインポートなどの機能が備わっており
値を操作する関数が用意されてます。
ifやfor文も使用できて演算もできるので連続したクラスをつくるのに最適です。

構文がSassとScssの記法あり、好きな方を選択します。
そのままでは認識できないので、コンパイラでCSS構文に変換する必要があります。その際に、圧縮したデータにすることもできます。

構文としては、SCSSのほうがCSSに近いような気がします。
{}でネストできるとこが可読性が良いのかもしれません。

使用するにあたって必要なものが Ruby と gem になりますが、
Macでは既にインストールされてます。
ターミナルを起動後
sudo gem install sass だけで済みます。

コンパイルするさいGUIツールとしては
CodeKit(https://incident57.com/codekit/)やPrepross(https://prepros.io/)あたりが定番でしょうか。

個人的には、Gulpでストリーム処理するほうがいろいろと楽なので(gulp-sass)プラグインを入れてます。
あとは、エディタによって補完するエクステンションをいれておけば扱いやすくなります。

#SCSSを使うことのメリット

定数を宣言したファイルを作成することで
共通するカラーコードなどを一元管理することができることでしょう。
Sassの変数は、グローバルとローカルでスコープできます。
変数に型もあり、@ifを使用して特定(型の判別:type-of関数)の処理をしたい場合にも有効です。
また、@extendや@mixinを使用してクラスを再利用する。
BEMのCSS設計との相性もよくステートフルなCSS設計を意識する習慣がつきます。

#手始めに

初期化するCSS(normalize、reset、sanitize etc..)をインラインインポートなんかから手始めにはじめてみるのが良いかもしれません。
ファイルはパーシャルにして管理しておくと後々の編集がしやすいと思います。

#備考

また、現在策定中でCSSでも変数が使えるようになるようです。
CSS Variables (https://drafts.csswg.org/css-variables/) という仕様です。
ネイティブなCSSに変数が使えるようになればJavaScriptとの親和性も良い感じでできるんじゃないでしょうか。

#最後に

と書きつつもコーディングは最近、久々にやりはじめてるので
なかなかブラウザごとにディスプレイされるものが違いうまくいかないことばっかりですが、とりあえず試しながらより高度な手法を学んでいこうと思います。

この記事を書いた人:LEE LEE

  • シェア
  • ツイート