未来電子テクノロジーでインターンをしているyukako_nishimuraです。
LESSって何？
LESSとは、CSSをより簡単に書けるようにした拡張言語です。
LESSを使うことで、より楽にCSSをかけるようになります。
LESSってどうやって使うの？
LESSを使う方法は2通りあります。
サーバー側でコンパイル
lessのインストール
npm install -g less
lessで書いたスタイルシートをcssのスタイルシートに変換
lessc styles.less > styles.css
LESSをCSSに変換します。
次に、HTMLの<head>タグ内に、
<link rel="stylesheet" href="styles.css" />
を挿入し、変換したCSSファイルを適用して完了です。
クライアント側でコンパイル
HTMLに以下を挿入します。
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
これだけでstyles.lessに書いたスタイルがクライアント側でCSSに変換されます。
いちいち書き直すたびに手動で変換しなくていいので楽ちんですね。
LESSってどう便利なの？
変数が使える
LESSでは@変数名で自由に変数をつくって、使うことができます。
変数の代入
@変数名 値
例えば、
@fontsize 10px
とすると、@fontsizeに10pxという値が代入できます。
変数の参照
プロパティ値などに
@変数名
を使うと、変数値を参照できる。
例えば
font-size: @fontsize;
とすると、変数の値が参照され、
font-size: 10px;
と同じ結果になります。
四則演算もできるので、簡単に綺麗なレイアウトを作れそうですね。
セレクタ名やプロパティ名も変数で定義できる
実はセレクタ名やプロパティ名も変数で定義できていしまいます。
@変数名: 文字列;
@{変数名}{
プロパティ: 値;
プロパティ: 値;
}
参照時に変数名を{}で囲うことにだけ注意が必要です。
プロパティをまとめる（ミックスイン）
共通するプロパティをわざわざ書くのって、ちょっと非効率ですね。
LESSではプロパティをまとめて、名前を付けることができます。
.名前{
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
}
定義したプロパティの塊（ミックスイン）は、
#header{
プロパティ: 値;
プロパティ: 値;
.名前();
}
とすることで、他のセレクタにもミックスインで定義したプロパティを適用できます。
オブジェクト指向言語の継承に似てますね。
また関数みたいに引数をつかうこともできます。
.名前(@引数1;@引数2){
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
}
#header{
.名前(値1;値2);
}
関数が用意されている
例えば、16進数の色の表現にあまり詳しくない人にとっては、同じ系統の色を指定するのも一苦労ですよね。
しかし、用意された関数を使えば、同じ系統の色で少し暗い色を簡単に指定できます。
@darker darken(色,暗くする％)
他にも公式サイトの関数ページに便利な関数がたくさんのっています。
階層的な書き方
こんなHTMLがあったとしましょう。
<div>
<h1>header1
<a class="class1">anchor</a>
</div>
divの下のタグh1とクラスclass1をそれぞれ装飾したいです。
またdiv全体に統一したデザインも使いたいです。
CSSなら並べて定義しないといけません。
div{}
div>h1{}
div>.class1{}
しかし、lessならこれを階層的に定義できます。
div{
h1{
}
.class1{
}
}
記述量も減り、理解しやすいですね。