omachizura

仕事メモ、役に立ったスキルをまとめています。


less|cssに変数を使い実装を効率化する方法

ホームページを作っていて、規模が大きくなっていくにつれ、気をつけていてもcssのソースはグチャグチャになってしまい、後で見返したときに「これはどこのスタイルだっけ?」となってしまうことがあると思います。

保守性・柔軟性を上げるために、cssに変数を使うことができたら。。。と考えたことのある方は多いかと思います。

もしcssに変数を使えたら、ホームページ全体に影響するメインのカラーは最初に変数として定義しておいて、文字色や背景色はその変数を使用するようにすることができます。なので、「やっぱり気が変わってメインのカラーを青から赤に変えたい」といった場合でも、最初に定義した変数を青から赤に変更するだけで、ホームページ全体のメインカラーを変更することができます。

それでは、具体的にcssに変数を使う方法を紹介します。

LESS

ご存知の通り、cssでは変数を使うことができません。なのでまずはcssファイルの拡張子をlessに変更します。

例)style.css → style.less

lessとはcssを生成するための言語です。lessファイルをツールなどを使ってコンパイルし、cssファイルを生成する流れになります。

lessのコンパイル方法は 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を試してみてはいかがでしょうか。