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を試してみてはいかがでしょうか。


関連記事

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

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。ファイルを変更すると自動でビルドが行われ、ブラウザが再読込されますが、ビルド...


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。最新のバージョンに更新するためには、package.jsonに記載されているパッケージのバージョンの記載を最新にする必...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • gulp|watchやlivereloadのタスクを停止する方法

    gulpでwatchやlivereloadを停止したい場合、ctrl+Cで停止することができますが、sublime textやatomのプラグインからwatchなどを起動した場合、ctrl+Cで停止す...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


  • gulpの便利なおすすめプラグイン

    gulpを導入するとWEB開発をとても効率よく簡単に行うことができるようになります。私がよく利用している便利なプラグインを紹介します。


  • gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • highlight.jsをローカルで実行してハイライトされたファイルを出力

    ホームページやブログでプログラムのコードを掲載する際に、以下のようにコードをシンタックスハイライト(色付け)をすることがあると思います。highlight.jsという便利なライブラリを使っていましたが...


  • gulpのpipeで独自のファンクションを実行する

    gulpのpipeの中で独自に定義したファンクションを実行し、srcで指定した各ファイルの内容を変更したい場合、through2というモジュールを使用すれば実現できます。through2を使えばプラグ...