WordPressテーマ「Simplicity」のstyle.cssを編集する際に、Scssを使うことにしました。
私のScssとの出会いは「Bones」というブランクテーマでした。
とあるサイトを作る時に、ブランクテーマを使いたい、となった時に探したものですが、下記の記事で紹介されていたテーマ「Bones」に興味を持ちました。
おすすめポイントの一つに「Sassが使いやすい」というのがあり、「Sass」って何？？となりいろいろと調べたところなんか便利そう…と思いました。
「Sass」と「Scss」の違いを理解できてるか微妙なところですが、「Scss」は「Sass」から派生した構文の一つで、私が今まで使っていたcssの構文とほとんど同じ、というぐらいの認識です。あとファイルの拡張子が違う。（ .sass と .scss ）
それから「Sass」は「サス（サース）」って読むけど「Scss」は「エスシーエスエス」って読むらしい。「Scss」が「Sassy css」の略だから？「エスシーエスエス」って呼ぶのめんどいからもっと簡潔な名前があるといいのになぁ。
さておき、ともかく導入するためにはあれやこれやしなくては、といろんな記事を読んだ知識を以て、コマンドプロンプトの黒い画面と格闘してRubyを入れたりコンパイル用のソフト入れたり、うまく動かないからRubyのバージョン変えてみたり、ごにょごにょやってなんとかかんとかできたかな、っていう状態にはなったのですが、ふとした時に使っているDreamweaverでコンパイルできることに気づきました。
詳しいやり方は下記の記事に掲載されています。
はぁ、もっと早く出会いたかった。。。というか気づかない私もダメですけどね。
Scssで私が最初にやってみたいなぁと思ったのが「変数」を使うことです。
色の指定をする時に、「あれ？あの見出しと同じ色使いたいけどなんだっけ？」とブラウザで確認したりすることが何度もあって、めんどくさかったんです。
例えば青い色でも数種類あるとして、それぞれ覚えるなんて無理。（私には）そんな時にでもScssで次のように記述すれば、サクッとcssに出力してくれるんです。
上記の場合、赤系にしたい場合には $key-color: $red; とすれば良いですね。
それに、darken や lighten を使えば、パーセンテージを変更するだけで同系色の色を自動的に作ってくれます。
なんて便利!!これで色探しのストレスから開放されます。
他にも継承とかいろいろ便利なものがたくさんあるので、もっと勉強します!!
