Wikibooks

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: レスポンシブなグリッドレイアウトライブラリ

外部リンク

編集
 
Wikipedia
 ウィキペディアにLESSの記事があります。
"https://ja.wikibooks.org/w/index.php?title=LESS&oldid=251977" より作成