概要

Less（Leaner Style Sheetsの略）は、CSSの下位互換性のある言語拡張です。これは、Less言語と、LessスタイルをCSSスタイルに変換するJavaScriptツールであるLess.jsの公式ドキュメントです。

LessはCSSとほぼ同じように見えるため、学習は簡単です。LessはCSS言語にいくつかの便利な機能を追加するだけで、それが迅速に学習できる理由の1つです。

Less言語機能の詳細については、機能を参照してください。
Less組み込み関数のリストについては、関数を参照してください。
詳細な使用方法については、Less.jsの使用を参照してください。
Lessのサードパーティツールについては、ツールを参照してください。

LessはCSSにどのような機能を追加しますか？機能の概要を次に示します。

変数

これは非常に分かりやすいです。

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

出力

#header {
  width: 10px;
  height: 20px;
}

変数の詳細を学ぶ

ミックスイン

ミックスインは、あるルールセットのプロパティを別のルールセットに含める（「ミックスインする」）方法です。例えば、次のクラスがあるとします。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

そして、これらのプロパティを他のルールセット内で使用したいとします。そのためには、プロパティが必要な場所にクラス名を挿入するだけです。

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

.borderedクラスのプロパティは、#menu aと.post aの両方に表示されるようになります。（#idsもミックスインとして使用できます。）

ミックスインの詳細を学ぶ

ネスト

Lessでは、カスケードの代わりに、またはカスケードと組み合わせてネストを使用できます。次のCSSがあるとします。

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

Lessでは、次のように書くこともできます。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

結果のコードはより簡潔になり、HTMLの構造を模倣します。

この方法を使用して、擬似セレクタをミックスインにバンドルすることもできます。これは、ミックスインとして書き直された従来の clearfix ハックです（&は現在のセレクタの親を表します）。

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

親セレクタの詳細を学ぶ

ネストされた@ルールとバブリング

@mediaや@supportsなどの@ルールは、セレクタと同じようにネストできます。@ルールは上に配置され、同じルールセット内の他の要素に対する相対的な順序は変わりません。これはバブリングと呼ばれます。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

出力

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

演算

算術演算+、-、*、/は、任意の数値、色、または変数に対して実行できます。可能な場合は、数学演算は単位を考慮し、数値を追加、減算、または比較する前に変換します。結果は、最も左側に明示的に指定された単位タイプを持ちます。変換が不可能な場合、または意味がない場合は、単位は無視されます。変換不可能な例：pxからcm、またはradから％。

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

乗算と除算は数値を変換しません。ほとんどの場合、意味がありません - 長さ×長さは面積になりますが、CSSでは面積の指定はサポートされていません。Lessは数値をそのまま処理し、明示的に指定された単位タイプを結果に割り当てます。

@base: 2cm * 3mm; // result is 6cm

色についても算術演算を実行できます。

@color: (#224488 / 2); // result is #112244
background-color: #112244 + #111; // result is #223355

ただし、Lessのカラー関数の方が便利かもしれません。

4.0以降、/演算子を使用して、括弧の外側で除算は実行されません。

@color: #222 / 2; // results in `#222 / 2`, not #111
background-color: (#FFFFFF / 16); //results is #101010

常に機能させる場合は、Math設定を変更できますが、推奨されません。

calc()の例外

v3.0.0リリース

CSSとの互換性のため、calc()は数学式を評価しませんが、ネストされた関数内の変数と数学式は評価します。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

エスケープ

エスケープを使用すると、任意の文字列をプロパティまたは変数の値として使用できます。~"anything"または~'anything'内のものは、補間を除いて変更なしで使用されます。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

結果は

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

Less 3.5以降、次のように書くこともできます。

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

3.5以降では、「引用符によるエスケープ」が必要だった多くのケースが不要になりました。

関数

Lessは、色を変換し、文字列を操作し、数学を実行するさまざまな関数を提供します。これらは関数リファレンスに完全に記載されています。

使用方法は非常に簡単です。次の例では、percentageを使用して0.5を50％に変換し、ベースカラーの彩度を5％上げ、次に背景色を25％明るくして8度回転させた色に設定します。

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

参照：関数リファレンス

名前空間とアクセサ

(CSS @namespaceまたは名前空間セレクタと混同しないでください)。

組織化のため、またはカプセル化を提供するためだけに、ミックスインをグループ化したい場合があります。Lessでは、これを非常に直感的に実行できます。#bundleの下にいくつかのミックスインと変数をバンドルして、後で再利用したり、配布したりしたいとします。

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

#header aに.buttonクラスをミックスインしたい場合は、次のように実行できます。

#header a {
  color: orange;
  #bundle.button();  // can also be written as #bundle > .button
}

注：CSS出力に表示させたくない場合は、名前空間（例：#bundle()）に()を追加します（例：#bundle .tab）。

マップ

Less 3.5以降、ミックスインとルールセットを値のマップとして使用することもできます。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

予想通り、次のように出力されます。

.button {
  color: blue;
  border: 1px solid green;
}

参照：マップ

スコープ

LessのスコープはCSSのスコープと非常に似ています。変数とミックスインは最初にローカルで検索され、見つからない場合は「親」スコープから継承されます。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

CSSのカスタムプロパティと同様に、ミックスインと変数の定義は、参照される行の前に配置する必要はありません。そのため、次のLessコードは前の例と同じです。

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

参照：遅延読み込み

ブロックスタイルのコメントとインラインコメントの両方が使用できます。

/* One heck of a block
 * style comment! */
@var: red;

// Get in line!
@var: white;

インポート

インポートはほぼ期待通りに動作します。.lessファイルをインポートでき、その中のすべての変数が使用できるようになります。.lessファイルの拡張子は省略可能です。

@import "library"; // library.less
@import "typo.css";

インポートの詳細を学ぶ

CSSに少しだけ機能を追加。

概要

変数