Sassは書籍もでていて現場でも使われ始めているアプリです。CSSを簡素化できたり、変数がつかえる便利な物って大まかに認識しています。

Sassとは何か？

使っていないのでわかりません。使っている人のブログが検索すれば出てくると思うので見た方が良いです。ざっくりいうと、

1. SassでCSSを書く
2. ブラウザはSassファイルを読めないのでCSSに変換（コンパイル）する
3. サイトに反映される

こんな感じです。Sassは.sassと.scssの二つのファイル形式があるみたいですが、CSSに近い書き方の.scssが主流みたいです。

Sassの使い方

SassはRubyというソフトがないと動きません。Windowsには標準で入ってないため公式サイトからダウンロードする必要があります。Macは標準で入っています。

Rubyのインストールが面倒

最近のPCならスペックは高いのでRubyをインストールしても大して重くならないのですが、個人的にRubyをインスト-ルしてまで使いたいのか？と考えてみたとき別にそこまでして使いたいとは思わないでした。けどCSSで変数がつかえるというのは非常にありがたい（CSS書く時間が短縮できる）ので変数は使いたいという欲望が現れます。

そんな欲望をかなえてくれるのが多分LESS

僕の思っている欲望をかなえてくれるのがLESSです。Sassと同じで変数がつかえ、Rubyのインストールをしなくてもつかえます。

ファイル拡張子は.less

LESSのファイルは拡張子が.lessになります。なのでサイトで指定するときは

<link rel="stylesheet/less" type="text/css" href="less/style.less" />

と、LESS形式で指定します。これだけではブラウザは解釈してくれません。そこでJSを指定します。LESSはJSファイルを読み込む事で、.less→.cssに変換してくれるのです。

<script src="js/less.min.js"></script>

JSファイルは公式サイトからダウンロードできます。

デメリット！

Googleクロームではブラウザの解釈の問題で、ローカルファイルでは適用されないみたいです。firefoxでは適用されます。なのでfirefoxで確認してある程度構築したらサーバーにアップしてクロームで確認がいいかもです。面倒な人はRubyいれたほうがいいかもしれません。