CSS
less
npm

CSSの拡張メタ言語です。

概要

CSSにコンパイルする必要がありますが、LESSを使用することで下記のメリットを受けることが出来ます。

  • 変数を使用することが出来る
  • 分割したLESSファイルを1つのCSSファイルにコンパイルすることが出来る
  • コンパイル時にCSSファイルを圧縮することが出来る

変数を使用することが可能になるため、共通で使用する設定(色、幅等)を局所化することが出来ます。
また、部品ごとにLESSファイルを作成したり、定数を1つのLESSファイルにしたりすることで、保守性の向上に繋がります。

コンパイル

コンパイラーの導入

npmでインストールします。

npm install -g less@2.7.2

コンパイル方法

下記コマンドでlessファイルをcssファイルにコンパイルします。
-xオプションで圧縮したcssファイルを生成します。

lessc -x src.less dst.css

記法

変数

変数は下記のように記述します。

@hoge-color: rgba(178, 222, 255, 0.5);
@hoge-width: 300px;

インポート

例えばhoge.lessにconst.lessをインポートする場合下記のように記述します。

@import const.less;

lessファイルを分割した場合は1つのlessファイルに全てインポートし、コンパイルすれば1つのcssファイルにまとめられます。

エスケープ

例えばcssで横幅を計算した値に設定する場合下記のように記述します。

.hoge-width{
    width: calc(100vw - 200px);
}

これをlessで記述する場合はエスケープする必要があります。

.hoge-width{
    width: calc(~”100vw - 200px”);
}

エスケープする場合は文字列の先頭に~を付けます。