CSS の拡張メタ言語である LESS の概要と導入方法、使い方をまとめました。
概要
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”);
}エスケープする場合は文字列の先頭に ~ を付けます。
