SASSを触ってみた

第16回 勉強会でのSASSがすごく便利そうだったので触ってみた。使い方の感想とメモ。

インストール

Macだったら以下のコマンド一発でOK。楽勝

sudo gem install sass

既存のCSSをSCSSファイルのコンバート

今までは生のCSSを記載していたから、どれだけの精度があるのか試しがてらCSSからSCSSへとコンバートしてみた。css2sassってコマンドがあるみたいだけど、お試しだから以下のウェブサービスで変換してみた。

No such app
 css2sass.heroku.com 

変換後のファイルと変換前のファイルを比べてみた感想としては、classとかidのネストを検出して変換しているように見える。僕としてはインデントとカッコの綴じ方とかが気に食わなかったけど、どういうふうに書けるのか?っていうのをCSSとSCSSとで比較できるという意味でかなり便利だと思う。

SASSファイルを監視して自動でCSSファイルに変換

これもコマンド一発。以下のコマンドで変換できる。

sudo sass input.scss:output.css

ディレクトリ指定とかコンパイルしたものを出力とか改行をちゃんと入れて出力とか色々オプションがあるらしい。詳しくは以下のURLの3を参考に。

mixinを書いてみる

mixin書くだけで十分捗ると言われていたので、mixiをとりあえず書いてみた。よくdivのbackgroundに画像を入れるたびに同じ事を書いていたのでまずはそこを変換してみた。

@mixin mixin-background-image($imageUrl:””, $size:contain) { background-image: url($imageUrl); background-position: center center; background-repeat: no-repeat; background-size: $size; }

使う場所には以下のように記載する。

@include mixin-background-image(“../img/arrow_sub.png”, contain); }

毎回書いている部分がちょっと減るからすっきりする。最初からSASSで記載していればもうちょっと共通的に使える部分をmixinで切り出すことで変更に強いCSSがかけるのかなぁという印象。ベンダープレフィックスをわざわざ書くのがめんどくさいのでそこら辺のmixinを書けばもっと楽になると思う。

まとめ

大体1時間ぐらいしか触ってないんだけど、SCSSで記載すればちょっと便利なCSSだと思って書くことができると思う。他にもいろいろ便利な機能はあるんだろうけど、とりあえずSASSとしてファイルを作ってみて同じ部分だけmixinで記載するってだけでも十分導入する価値はあると思う。今まで生のCSSを書いていた人は、今まで記載していたCSSの拡張子だけ変えてこれから先で弄る部分だけmixinで記載するって感じで使うのがいいのかなー。デザイナさんでもmixinしか使わないとかいうルールでやれば問題も発生しにくそう。ただ、watchでコマンド叩いてもらわないといけないってのがちょっときついかも。shell作るにしても「これ叩いて初めてくださいね。」みたいなルールが必要になるからちょっとだるい。