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

Image [4]

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

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

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

Image
SassMeister

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

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

Image [1]

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

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

Image [2]

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

Image [3]

例えば「このテーマの基本色濃い色」とかを $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を便利に使えるようになるまでもうちょっと時間がかかりそうです。まずは買った本をその内容通りに少しずつでも進めてみようと思います(>_<)。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る