はじめに
ウェブサイトのデザインを決める上で欠かせないCSS。しかし、サイトの規模が大きくなるにつれて、CSSの記述は複雑になり、管理が大変になることがあります。「同じ色コードを何度も書いている」「セレクタの親子関係が分かりにくい」といった悩みを抱えている方も多いのではないでしょうか。
そんなCSSの悩みを解決してくれるのが、今回ご紹介する「LESS（Leaner Style Sheets）」です。LESSは、CSSをより効率的に、そしてもっと直感的に書くためのツールです。この記事では、LESSとは何か、どんなメリットがあるのかを初心者の方にも分かりやすく解説していきます。
LESSが持つ二つの意味
「LESS」という言葉には、実は全く異なる二つの意味があります。混乱しないように、それぞれの意味を理解しておきましょう。
- 英単語としての「less」
一つ目は、中学校で習う英単語としての「less」です。これは「より少ない」という意味を持つ単語です。 例えば、「less water」（より少ない水）のように、量や程度が少ないことを表す際に使われます。 - CSSプリプロセッサとしての「LESS」
そして二つ目が、本記事のテーマである「Leaner Style Sheets」の略称としての「LESS」です。 ここでの “Leaner” は「無駄のない」「効率的な」といった意味合いを持ちます。 つまり、CSSをより無駄なく効率的に書くための言語、それがLESSです。
CSSプリプロセッサ「LESS」とは？
LESSは「CSSプリプロセッサ」と呼ばれるものの一種です。 CSSプリプロセッサとは、CSSにはない便利な機能（変数や入れ子構造など）を使ってコードを書き、それを最終的に通常のCSSファイルに変換（コンパイル）してくれるツールのことです。
ブラウザはLESSのコードを直接解釈できないため、書いたコードをCSSに変換する作業が必要になります。 この一手間をかけることで、私たちはCSSをよりプログラミング言語のように、効率的かつ体系的に管理できるようになるのです。
LESSは2009年にAlexis Sellierによって設計された動的スタイルシート言語です。 当初はRubyで書かれていましたが、後にJavaScriptに置き換えられました。
LESSの主な機能とメリット
では、具体的にLESSを使うとどのような便利なことができるのでしょうか。代表的な機能と、それによって得られるメリットをコード例と共に見ていきましょう。
1. 変数 (Variables)
サイト全体で使うテーマカラーなど、繰り返し使用する値を「変数」として保存できます。 後から色を変更したくなった場合も、変数の値を変えるだけで、その変数が使われている全ての箇所のCSSが一括で変更されるため、修正漏れを防ぎ、メンテナンス性が大幅に向上します。
変数は @変数名: 値; のように定義します。
// LESS
@primary-color: #3273dc;
@text-color: #4a4a4a;
.button { background-color: @primary-color;
}
.title { color: @text-color;
} 上記のように書くと、以下のようなCSSにコンパイルされます。
/* コンパイル後のCSS */
.button { background-color: #3273dc;
}
.title { color: #4a4a4a;
} 2. ネスト (Nesting)
CSSでは親子関係にあるセレクタを別々に書く必要がありますが、LESSではHTMLの構造のようにセレクタを入れ子にして書くことができます。 これにより、コードの親子関係が明確になり、可読性が高まります。
// LESS
nav { ul { margin: 0; padding: 0; li { list-style: none; a { text-decoration: none; color: #3273dc; } } }
} これがコンパイルされると、見慣れたCSSの形式になります。
/* コンパイル後のCSS */
nav ul { margin: 0; padding: 0;
}
nav ul li { list-style: none;
}
nav ul li a { text-decoration: none; color: #3273dc;
} 3. ミックスイン (Mixins)
ミックスインは、特定のスタイルのまとまりを定義しておき、それを他のセレクタで再利用できる機能です。 例えば、角を丸くするスタイルなど、複数の場所で使いたいスタイルを一度定義するだけで、何度も呼び出して使うことができます。コードの重複を減らし、一貫性を保つのに役立ちます。
// LESS
.rounded-corners { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.button { .rounded-corners; background-color: #3273dc;
}
.box { .rounded-corners; border: 1px solid #dbdbdb;
} コンパイル後のCSSは以下の通りです。
/* コンパイル後のCSS */
.button { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #3273dc;
}
.box { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #dbdbdb;
} LESSとSassの違い
LESSとしばしば比較されるものに「Sass（サス）」があります。SassもLESSと同じCSSプリプロセッサで、非常に人気があります。 どちらもCSSを効率的に書くためのツールですが、いくつかの違いがあります。
| 項目 | LESS | Sass (SCSS記法) |
|---|---|---|
| 開発環境 | JavaScript (Node.js) がベース。クライアントサイドでのコンパイルも可能。 | Dart（以前はRuby）がベース。 |
| 変数の定義 | @記号を使用 (例: @color: blue;)。 | $記号を使用 (例: $color: blue;)。 |
| ミックスインの呼び出し | クラス名のように記述するだけ (例: .mixin-name;)。 | @include を使用 (例: @include mixin-name;)。 |
| 機能 | シンプルで学習しやすい機能が多い。 | if文やfor文などのより高度なプログラミング機能が豊富。 |
どちらが良いかはプロジェクトの規模や個人の好みによりますが、LESSはSassに比べてシンプルで、CSSの知識があれば直感的に理解しやすいため、初心者にとって学習を始めやすいと言われています。
LESSの導入方法（コンパイル）
LESSを実際のCSSファイルに変換（コンパイル）するには、いくつかの方法があります。
- Node.jsを使う方法: コマンドラインツールを使って手動または自動でコンパイルする方法です。Node.jsのパッケージマネージャであるnpmを使って、LESSのコンパイラをインストールします。
インストール後、以下のコマンドでコンパイルできます。npm install -g lesslessc style.less style.css - GUIツールを使う方法: PreprosやCodeKitといった専用のアプリケーションを使うと、コマンド操作なしでファイルの変更を監視し、自動でコンパイルしてくれます。初心者にはこちらの方が手軽でおすすめです。
- クライアントサイドで変換する方法:
less.jsというJavaScriptファイルを読み込むことで、ブラウザ側でLESSをCSSに変換する方法もあります。 ただし、パフォーマンスの観点から、開発時に手軽に試す用途で使われることが多く、本番環境では事前にコンパイルしたCSSファイルを使うのが一般的です。
まとめ
LESSは、変数、ネスト、ミックスインといった強力な機能を提供することで、CSSの記述を劇的に効率化し、保守性を高めてくれるCSSプリプロセッサです。
- 変数でコードの再利用性を高める。
- ネストでコードの構造を分かりやすくする。
- ミックスインでコードの重複をなくす。
最初はコンパイルという一手間が必要になりますが、その手間を補って余りあるメリットを提供してくれます。特に中規模から大規模なプロジェクトにおいて、その真価を発揮するでしょう。CSSの管理に課題を感じている方は、ぜひこの機会にLESSの導入を検討してみてはいかがでしょうか。