はじめてのCSS拡張メタ言語「Less」

CSS拡張メタ言語とは

CSS拡張メタ言語はCSSの言語自体を拡張し、CSSには存在しない機能を追加します。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加することができます。

「Less」

先行の「Sass」よりシンプルに記述できるということで、はじめてのCSS拡張メタ言語は「Less」でいってみます。

• LESS « The Dynamic Stylesheet language

• Lessの日本語ドキュメント

利用してみる

LESSの公式サイトから less.js をダウンロードします。
HTMLファイルで.lessファイルとless.jsを呼び出すことで、Less」が利用できます。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

参考

「Sass」と「Less」の比較

CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

「Less」の使い方

ASCII.jp：CSSの記述が3倍速くなる「LESS」の使い方

はじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blog