最近、Ruby on Railsの勉強をしているのですが、cssファイルの拡張子がscssとなっていたのが気になったので調べてみました。
scssとは
scssとは、cssファイルと互換性を確保しつつも、変数などを取り入れて記述方法をパワーアップさせたものだということがわかりました。
ブログのテンプレートをそのまま使う人でも、部分的に気になるところがあって、cssファイルを直すことはあるのではないでしょうか。その時、フォントサイズや色などを直すために、複数箇所を書き換えしないといけなくて面倒な思いをしたことはあると思います。scssにすることでそれが解決しました！
scssにすることによる利点
自分なりに調べてみましたが、scssにすることによって、下記の利点があると思います。
- フォントサイズ、色、幅などを変数で定義しておいて、その変数を使い回すことができる。それにより、同じことを複数箇所に書かなくて済むので、メンテナンスしやすくなる。
- cssをhtmlの構造に合わせて入れ子に書くことができるので、構造が直感的に把握しやすくなる。書き間違えも減りそう。
- mixinを使うことによって、デフォルト値付きの引数を持った関数のようなことができる。marginやpaddingを設定するのが楽になりました。
- 数の演算（足し算、引き算、掛け算、割り算など）ができる。画面やパーツの幅をいちいち自分で計算しないでいい。変数と一緒に使うことによって、よりメンテしやすくなると思います。
- scssファイルからcssファイルに変換するときに、整形したり圧縮したりできる。
文法的にも、新しくプログラミング言語を覚えるほどの難しさはないので、仕事だけでなく、個人ブログレベルでもカスタマイズやメンテナンスするのに使うとよいのではないでしょうか。
導入方法、使い方、書き方は下記のサイトを参照
scssの導入方法、使い方、書き方は既に詳しく解説されたサイトがあるので、そちらを見てもらえば良いかと思います。scssの導入にはRubyをインストールしたりする必要があるので少し難しいです。。。
sassと書かれているサイトもあって混乱しそう。sassとscssは同じようなものだという認識でいいのかしら。
scssからcssに変換する方法
scssからcssに変換する方法ですが、私は以下の2つのどちらかをおすすめします。
わかりやすいのはKoalaを使う方かと思いますが、scssファイルをNetBeansで管理すると、NetBeansの編集支援機能を使えますし、文法誤りも指摘してくれるので、Webデザインのカスタマイズ効率が上がるかと思います。
私はFC2ブログ時代はKoalaを使っていたのですが、今のWordPressブログに引越してからはWordPressのテーマ配下（PHPファイル、scssファイル、cssファイル）をNetBeansのプロジェクトとして管理しています。
cssでよく使うのはfloatを解除するclearfixだと思うのですが、scssのmixinとして書くことにより、html(ブログのテンプレート、WordPressだとPHPファイル)のほうに書かなくて済むようになりました。見かけのデザインをCSS、ブログの構造はHTMLというように分けたいですからね。
scss関係でcompassというのもあるのですが、これからもう少し勉強したいですね。
終わりに
scssの導入により、ブログデザインのカスタマイズがしやすくなりました。同じ記述をたくさんの箇所に書く必要がなくなるので、修正漏れも減りました。scssはおすすめですよ。
ちょっと敷居が高いかもしれませんが、cssファイルをもう少し楽に直せたらいいのにと思う方は、scssにチャレンジしてみるのも良いのではないでしょうか。