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