LESS

はじめに

LESS とは

LESS は、CSS をより簡潔で記述しやすくするための拡張言語です。CSS は、Web ページの見た目やレイアウトを定義するために使用される言語ですが、LESS は、変数、ミックスイン、ネスト、関数などの機能を追加することで、CSS をより使いやすくしています。

LESS の利点

LESS を使用すると、以下の利点があります。

• CSS コードが簡潔になる
• コードのメンテナンスが容易になる
• CSS の再利用性が向上する
• 開発効率が向上する

LESS の基本構文

LESS の基本構文は、CSS の構文とほぼ同じですが、以下の機能を追加しています。

• 変数
• ミックスイン
• ネスト
• 関数
• 演算子

これらの機能を使用することで、CSS コードをより簡潔で読みやすくすることができます。

変数

変数の定義

LESS では、変数を使用して、値を保存することができます。変数は、@ 記号 followed by 変数名で定義します。

@primary-color: #FF0000; /* 赤色 */
@font-family: "Helvetica Neue", sans-serif; /* フォントファミリー */

変数の使用

変数は、@{} 記号 followed by 変数名で呼び出すことができます。

body {
  color: @primary-color;
  font-family: @font-family;
}

変数の種類

LESS では、以下の種類の変数を定義することができます。

• グローバル変数
• ローカル変数
• ミックスイン変数

グローバル変数は、すべてのスコープで使用できる変数です。ローカル変数は、定義されたスコープ内でのみ使用できる変数です。ミックスイン変数は、ミックスイン内で使用できる変数です。

ミックスイン

ミックスインの定義

ミックスインは、CSS コードの塊を定義するための機能です。ミックスインは、@mixin 記号 followed by ミックスイン名で定義します。

@mixin button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

ミックスインの使用

ミックスインは、@include 記号 followed by ミックスイン名で呼び出すことができます。

.button-primary {
  @include button;
  background-color: @primary-color;
  color: white;
}

ミックスインの引数

ミックスインは、引数を受け取るように定義することができます。引数は、@param 記号 followed by 引数名で定義します。

@mixin button(@color, @text-color) {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: @color;
  color: @text-color;
  text-decoration: none;
  cursor: pointer;
}

ミックスインを呼び出す際には、引数を指定することができます。

.button-success {
  @include button(#008000, white);
}

ネスト

ネストの使い方

LESS では、CSS セレクタをネストすることができます。ネストは、{} 記号 followed by セレクタで定義します。

body {
  font-family: @font-family;
  color: #333;
 
  h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }
 
  p {
    font-size: 16px;
    line-height: 1.5;
  }
 }

ネストの利点

ネストを使用すると、以下の利点があります。

• CSS コードがわかりやすくなる
• コードの階層構造が明確になる
• CSS のメンテナンスが容易になる

ネストの注意点

ネストを使用する際には、以下の点に注意する必要があります。

• ネストの入れ子すぎ
• セレクタの特異性

ネストを入れ子にしすぎると、コードがわかりにくくなってしまいます。また、セレクタの特異性が高すぎると、CSS の意図した動作がされない可能性があります。

演算子

LESS では、以下の演算子を使用することができます。

• 算術演算子
• 比較演算子
• 論理演算子
• 文字演算子

算術演算子

算術演算子は、数値を操作するために使用されます。

演算子	説明	例
+	加算	1 + 2 = 3
-	減算	3 - 2 = 1
*	乗算	2 * 3 = 6
/	除算	6 / 3 = 2
%	剰余	5 % 2 = 1

比較演算子

比較演算子は、2 つの値を比較するために使用されます。

演算子	説明	例
==	等しい	1 == 1 = true
!=	等しくない	1 != 2 = true
<	小さい	1 < 2 = true
<=	小さいか等しい	1 <= 2 = true
>	大きい	2 > 1 = true
>=	大きいか等しい	2 >= 1 = true

論理演算子

論理演算子は、2 つの論理式を操作するために使用されます。

演算子	説明	例
&&	論理積	(1 == 1) && (2 > 1) = true
||	論理和	(1 == 1) || (2 > 1) = true
!	論理否定	!1 = false

文字演算子

文字演算子は、文字列を操作するために使用されます。

演算子	説明	例
+	文字列の連結	"Hello" + " " + "World!" = "Hello World!"

関数

関数の定義

関数を使用して、コードを再利用することができます。関数は、@function 記号 followed by 関数名 followed by 引数 followed by コードブロックで定義します。

@function darken(@color, @amount) {
  @color-rgb: red(@color) + green(@color) + blue(@color);
  @new-red: @color-rgb - @amount;
  @new-green: @color-rgb - @amount;
  @new-blue: @color-rgb - @amount;
 
  rgb(@new-red, @new-green, @new-blue);
}

関数の使用

関数は、@{} 記号 followed by 関数名 followed by 引数で呼び出すことができます。

body {
  background-color: darken(#000000, 50%);
}

関数の引数

関数には、引数を指定することができます。引数は、カンマ区切りで指定します。

@function mix-colors(@color1, @color2, @ratio) {
  @mix-red: red(@color1) * @ratio + red(@color2) * (1 - @ratio);
  @mix-green: green(@color1) * @ratio + green(@color2) * (1 - @ratio);
  @mix-blue: blue(@color1) * @ratio + blue(@color2) * (1 - @ratio);
 
  rgb(@mix-red, @mix-green, @mix-blue);
}

関数を呼び出す際には、引数を指定することができます。

高度な機能

ミックスインの継承

ミックスインを使用して、他のミックスインを継承することができます。

@mixin button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
  cursor: pointer;
}
 
@mixin primary-button {
  @include button;
  background-color: @primary-color;
  color: white;
}

ツールとライブラリ

LESS を使用するツール

LESS を使用するツールには、以下のものがあります。

• LESS.app: Mac 用の GUI アプリケーション
• Prepros: Mac と Windows 用の GUI アプリケーション
• Koa: Web ブラウザ用の JavaScript ライブラリ
• Juice: Node.js 用のライブラリ
• Grunt: タスクランナー
• Gulp: タスクランナー

LESS のライブラリ

LESS には、以下のライブラリがあります。

• Bootstrap: レスポンシブな Web デザインフレームワーク
• Foundation: レスポンシブな Web デザインフレームワーク
• Susy: グリッドレイアウトライブラリ
• Bourbon: ミックスインとヘルパーライブラリ
• Neat: レスポンシブなグリッドレイアウトライブラリ