less|cssに変数を使い実装を効率化する方法
ホームページを作っていて、規模が大きくなっていくにつれ、気をつけていてもcssのソースはグチャグチャになってしまい、後で見返したときに「これはどこのスタイルだっけ？」となってしまうことがあると思います。
保守性・柔軟性を上げるために、cssに変数を使うことができたら。。。と考えたことのある方は多いかと思います。
もしcssに変数を使えたら、ホームページ全体に影響するメインのカラーは最初に変数として定義しておいて、文字色や背景色はその変数を使用するようにすることができます。なので、「やっぱり気が変わってメインのカラーを青から赤に変えたい」といった場合でも、最初に定義した変数を青から赤に変更するだけで、ホームページ全体のメインカラーを変更することができます。
それでは、具体的にcssに変数を使う方法を紹介します。
LESS
ご存知の通り、cssでは変数を使うことができません。なのでまずはcssファイルの拡張子をlessに変更します。
例）style.css → style.less
lessとはcssを生成するための言語です。
lessファイルをツールなどを使ってコンパイルし、cssファイルを生成する流れになります。
lessのコンパイル方法はgulp|gulpの基本的な使い方で説明しています。
lessの文法はcssと同じため、cssファイルをそのままlessファイルに置き換えても基本的にlessのコンパイル時にエラーにはならないはずです。
lessで変数を使う方法を説明します。
@main_color: blue; /*変数名の先頭に@をつけて宣言します */
.main-font{
color: @main_color; /*上で宣言した変数を使用します */
}上記のlessファイルをコンパイルしてcssに変換すると、下記のようなcssが生成されます。
.main-font{
color: blue; /*変数名が変数の中身に置き換わっています */
}cssに変数が使えるようになるだけでも、保守性はかなり高まるのではないでしょうか。
lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。
また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能がたくさんあるので、cssを直書きしている方はぜひlessを試してみてはいかがでしょうか。