Sassってどこがどんな風に便利なのか、勉強し始めました

「Windows7にSass環境を構築するのに色々あった件」でSassの環境を整えてみました。まだSassのコードを書いたことが無かったので「Sassはじめの一歩！」的にまっしろな状態からSassを勉強し始めました

とりあえずSassってどういう風に便利なのかをWebで体験することができます。

を読んでいて、WebでSassを書いてその場でcssにしてくれるページがあるということが分かりましたのでやってみました。

SassMeister

このサイトです。左側にSassのソースを書くとリアルタイムで右側にcssを表示します。

本にあったコードを入力してみる

本にあった入力例を左側のSassという入力欄に入れると右側にcssが表示されました。右側のcssのように「mainというidの幅、pタグ、ptaguの中の　emタグ」に対して指定しようとすると全ての親子関係をそれぞれの指定に記述しなければいけませんでした。しかしSassだと親（main）　一段下がって子（p）　さらに一段下がって孫（em）と書けばいいのでとても楽です(^^)/

もう一つの例を入れてみます

ここでは　＄（ダラー）　がでてきました。$red　というのは変数です。この変数を使って共通する部分の色を　変数の名前（$red）で指定するので色を変えたときに一カ所　$red　のところを変えれば$redの指定してあるところのcssの色がすべて変わります。

例えば「このテーマの基本色濃い色」とかを　$kihonColorKoiiro とかの名前にしてそこだけで色を指定しておけば、文字の色や罫線など色指定するところにはすべてその　$kihonColorKoiiro　とすればOKです。便利ですね(^^)/

また、色番号だけだとどんな色かわかりにくいのでコメントも付けてみました。Sassでは　//　を付けただけでコメントを付けることができます。通常の　／＊　コメント　＊／　も使えます。これらの違いはcssを見ると分かるのですが　//　のコメントはcssに反映されません。そして　　／＊　コメント　＊／　で日本語を入力した場合は自動的に　@charset “UTF-8”;　を付けてくれるとかかなり便利ですね(^^)/

反省：Sassの便利さはわかりました。しかし…

Sassの便利さが分かって、さて実際に　Bones　というWordPressのテーマをいじってみようとしましたがちょっとつまづきました。

まず、Koalaというツールを使っていじってみようとしたのですが、wp-content\themes\bones-white-yellow\library\scss\partials_variables.scss　というファイルを直そうと、KoalaにドロップしてみたりしましたがファイルだけをドロップしてもKoalaでこのファイルが認識されませんでした。テーマフォルダごとのせるとその直下にあるscssは表示されるのですが、直したかったファイルは表示されません。うーん。

もしかするとKoalaはすべてのことができるわけでない、と書いてあったのでその関係でしょうか（今はまだよく分かってません）。

ということでやはり、コマンドラインからコンパイルするのかそれとも別のツールを探してみるかというところです。実際に修正してSassを便利に使えるようになるまでもうちょっと時間がかかりそうです。まずは買った本をその内容通りに少しずつでも進めてみようと思います(>_<)。