NEWSお知らせ

Sass導入しました

2014.09.04
開発者News

今回弊社で制作するWebサイトにSassを導入してみました。

Sassとは?
CSSのメタ言語のひとつで、同様の記述ができ機能が拡張されたものです。
Ruby環境があれば導入可能です、導入方法については多くのサイトで解説されているので、割愛させていただきます。

なぜ、導入したか?
・弊社は元々Rubyに力を入れていたこともあり、導入にあたって比較的容易であった。
・導入することで、既存・新規の サイトを、メンテ性を向上したかった。
・単純にプログラムの考えをデザイン担当者(私)が身近なCSSを通して知りたかった。

実際使ってみると
すごい便利です、特に変数やネストは、今まで該当箇所のカラーコードを逐一設定していたり、同様のスタイルの箇所をコピーしてもってきていました。
変数を使うと定義した変数を入れるだけで、コンパイル後に指定のカラーコードが反映されます。

/*文字色指定*/
$text-color:#333333;  

dl dd{
padding:5px 0;
color:$ $text-color;
}

dl dd {
padding: 5px 0;
color: #333333; 
}

またCSSの優先順があるため指定のIDまで細かくネスト構造を表記してスタイル指定していましたが、親ネストでスタイル指定するだけでコンパイル後反映してくれます。

弊社ではレスポンシブの波にのって順次サイトをレスポンシブ反映させているのですが、
Sassの導入によって、CSSの管理が楽になりました。
メディアクエリーの指定なんかも簡単にできるようになったので、Sassは本当に便利です。

archives

TOP