scssの導入でブログデザインのカスタマイズをしやすくしよう

公開日： 2014.05.11
カテゴリ：ブログ運営
※本ブログには広告が含まれます

最近、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は同じようなものだという認識でいいのかしら。
これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) | 株式会社LIG

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Webクリエイターボックス

scssからcssに変換する方法

scssからcssに変換する方法ですが、私は以下の2つのどちらかをおすすめします。

Koalaというソフトを使って、GUIでscssからcssに変換する。
統合開発環境であるNetBeansを使い、scssファイル保存時に自動的にcssファイルへ変換する。

わかりやすいのは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というのもあるのですが、これからもう少し勉強したいですね。