SassとLESSの違い ー CSSプリプロセッサ入門 ー
フロントエンド周り のコーディングは日々複雑化しています。CSSプリプロセッサを学ぶことでCSSコーディングを少しでも楽に行いましょう。今回は代表的なSassとLESSについて取り上げてみます。
CSSプリプロセッサに共通する主な機能
CSSプリプロセッサではそれぞれ細かい記述方法の違いはありますが、一般的に次のような機能があります。
- セレクタを入れ子にできる。
- 変数を使用できる。
- Mixinを作ることができる。
よく使うスタイルを組み合わせて、Mixinを作ることができます。 - 定義したスタイルを継承できる（extend)
他のidやclassで定義したスタイルを別のidやclassで継承することができます。 - コンパイル時に他のファイルをインポートして、一つのCSSファイルにすることができる。
別々のファイルを一つにすることができるので、記述方法に誤りがあると、コンパイル時にエラーが出ます。
SassとLESSそれぞれの特徴・違い
Sass
Rubyがベース
Rubyをインストールした後、Sassをインストールします。OSがMacであればRubyははじめからあるのでSassのみインストールします。Rubyに慣れている場合、導入しやすいです。
インストール順序
1.Rubyをインストールする。
2.Sassをインストールをする。
ターミナル（コマンドプロンプト）で
gem install sass
を実行する。
SASSとSCSSの２種類の記法で書ける
SASS(拡張子：.sass)とSCSS(拡張子：.scss)の記法を使うことができます。SCSSはCSSに近い記法なので覚えやすいです。反面、SASSはカッコなどを 省略できるので、データ量を少なくすることができます。
- sassでの記述
.test1
font-weight: bold
.test2
margin-top: 10px
- scssでの記述
.test1{
font-weight: bold;
.test2{
margin-top: 10px;
}
}
豊富な機能がある
CSSファイルの自動整形機能
コンパイル時にnested、expanded、compact、compressedからインデント形式が選択できます。上のscssをコンパイルした場合でそれぞれどうなるのかを見てみます。
- nested
.test1 {
font-weight: bold;
}
.test1 .test2 {
margin-top: 10px;
}
- expanded
.test1 {
font-weight: bold;
}
.test1 .test2 {
margin-top: 10px;
}
- compact
.test1 { font-weight: bold; }
.test1 .test2 { margin-top: 10px; }
- compressed
.test1{font-weight:bold}.test1 .test2{margin-top:10px}
条件分岐や繰り返し処理が可能
if文やfor文を使用して、条件分岐や繰り返し処理が可能です。
フレームワークCompass
Sassを元にしたフレームワークCompassによって、予め設定されたMixinなどを使うことができます。
LESS
JavaScriptがベース
Node.jsを元にしているので、JavaScriptに慣れているフロントエンドエンジニアにとって使いやすい。JavaScriptの関数を使用して文字列を扱うことに長けています。
CSSに近い記述方法
LESSの記述方法はCSSとほとんど違いはなく、近いものといえます。初めてCSSプリプロセッサを使う人に とって、学びやすいです。
インストール方法
1.less.jsをダウンロードする
- Node.jsのパッケージマネージャシステムnpmを使用
npm install -g lessを実行 （Node.jsがインストールされている必要あり）
- http://less-ja.studiomohawk.com/ よりダウンロード
.lessでhtmlに直接読み込みが可能
less.jsと組み合わせることで可能になります。下記コードを記述する順番を変えずにhtmlのヘッダに入れます。
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
制作過程で都度コンパイルするのは面倒なときは直接読みこませる機能が役に立ちます。読み込みの際に初回は多少時間がかかります。
コンパイルして、CSSファイルを生成することが可能
less.jsと組み合わせる方法はJavaScriptが使用できない環境では読みこまれないことになるので、本番環境ではコンパイルして生成したCSSファイルを使用することが現実的です。
まとめ：SassとLESSどちらを使えば良いか
SassがRubyベース、LESSがJavaScriptベースなので、好みによって使いやすい方を身に付けるのが良いでしょう。共通する機能も多いので、一つのCSSプリプロセッサを身につけていれば、他のCSSプリプロセッサを身につけるのはそれほど大変ではありません。
機能はSassの方が多く、SassとLESSの書籍の数を比較した際にSassの書籍の方が多く見られます。しかし、CSSプリプロセッサに初めて触れるときにLESSは機能が限定されているので、導入しやすいとも考えられます。
Monacaアプリ上で使う際にはMonaca IDEではなく、Monaca Localkitと組み合わせて使うのがお勧めです。ぜひお試しください！
