Scssを導入したり使ってみたり

WordPressテーマ「Simplicity」のstyle.cssを編集する際に、Scssを使うことにしました。

私のScssとの出会いは「Bones」というブランクテーマでした。

Bones is a WordPress Theme for Developers Built around the latest in Web Standards, Bones is a rock solid foundation to start any WordPress project. Keep what y...

とあるサイトを作る時に、ブランクテーマを使いたい、となった時に探したものですが、下記の記事で紹介されていたテーマ「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 を使えば、パーセンテージを変更するだけで同系色の色を自動的に作ってくれます。

なんて便利!!これで色探しのストレスから開放されます。

他にも継承とかいろいろ便利なものがたくさんあるので、もっと勉強します!!

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク