MANA-DOT

PIXEL ART, PROGRAMING, ETC.

Sassを使ってみた

ちょっと乗り遅れた感がありますが、better-cssな感じで書けるcssコンパイルするメタ言語、sassを使ってこのブログのスタイルを書いてみました。 style.scss

感想ですが、以下の点が素晴らしいと感じます。

  • 変数が利用できるので、メインの文字色など色んな所で使いまわす値を一箇所で管理できる
  • ネスト構造のお陰で、でかい親要素の子を完結に記述できる
  • watchで起動すれば、エディタで編集して即時で変換してくれるため、確認が楽ちん

cssを書くことは少ないですが、積極的に利用したいですね。

あと、一点コンパイル時にハマった点。ドキュメントによれば --style で:compressedなどを指定すれば、圧縮をしてくれるらしいですが、うまくいきませんでした。

sass --style compact --watch style.scss:style.css

実際は上のように、コロンなしでしてあげるのが正しいようです。ちゃんと読んでないせいかもしれないけれど、ちょっとハマりました。 ちなみに、wordpressのテーマ用CSSの場合、先頭のコメントに消えてほしくないのでcompressedよりcompactの方が便利です。