LESS入門!LESSの変数の使い方

less

CSSのコーディングが楽に作成できるLESSの変数の基本的な使い方を紹介します。
LESSにはSassと同様に単純な変数を持つ方法と、クラス自体を変数のように扱って拡張してクラスを作る方法があります。
今回はこの2つのやり方を今回は解説していきます。

[スポンサーリンク]

このページでやること

LESSの変数の持たせ方を解説します。
クラスを拡張して別クラスを作成する方法を紹介します。

LESSの変数の持たせ方

変数は@を使って定義します。
使う方も@XXXXのように値を扱うように変数をセットします。

@color: #ff0000;

.default-font {
    color: @color;
    font-size : 20px;
}

上記のLESSをビルドすると以下のようなCSSが作成されます。
LESSのビルドはLESSの実装に便利なエディタ「Crunch」を紹介します。を参照して下さい。

.default-font {
  color: #ff0000;
  font-size: 20px;
}

クラスを拡張して別クラスを作成する方法

以下のLESSでは、.default-fontクラスのフォントカラーとフォントサイズを引き継いだ.headerクラスを作成しています。
もちろんクラスを引き継ぐ時でも@XXXのように通常の変数を使用することも可能です。

@color: #ff0000;
@bgcolor: #000000;      

.default-font {
    color: @color;
    font-size : 20px;
}

.header {
    .default-font;
    background-color: @bgcolor;
}

上記のLESSをビルドするとこのようなCSSが作成されます。
.headerクラスが.default-fontクラスの内容をしっかりと引き継いでいます。

.default-font {
  color: #ff0000;
  font-size: 20px;
}
.header {
  color: #ff0000;
  font-size: 20px;
  background-color: #000000;
}

さいごに

LESSってSassと比べると知名度では劣りますけど実際使ってみた感じだとあまり遜色がないように感じました。
どちらを使うかは正直プロジェクト次第ってとこでしょうか。

Lessを使うのであればビルドツールCrunchも一緒に使うことをオススメします!
それでは!