Less（Leaner Style Sheets 的縮寫）是一種向后兼容的 CSS 語言擴展。這是 Less 語言和 Less.js 的官方文檔，Less.js 是將 Less 樣式轉換為 CSS 樣式的 JavaScript 工具。
￥Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.
因為 Less 看起來就像 CSS，所以學習起來很容易。Less 只對 CSS 語言做了一些方便的補充，這也是它可以學得這么快的原因之一。
￥Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.
有關 Less 語言特性的詳細文檔，請參閱 特性
￥For detailed documentation on Less language features, see Features
有關 Less 內置函數的列表，請參閱 函數
￥For a list of Less Built-in functions, see Functions
詳細使用說明，請參閱 使用 Less.js
￥For detailed usage instructions, see Using Less.js
Less 的第三方工具，請參閱 工具
￥For third-party tools for Less, see Tools
Less 給 CSS 增加了什么？以下是功能的快速概述。
￥What does Less add to CSS? Here's a quick overview of features.
變量
￥Variables
這些都是不言自明的：
￥These are pretty self-explanatory:
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
輸出：
￥Outputs:
#header {
width: 10px;
height: 20px;
}
混入
￥Mixins
混入是一種將一組屬性從一個規則集中包含（"混合進入"）到另一個規則集中的方法。所以說我們有以下類：
￥Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
我們希望在其他規則集中使用這些屬性。好吧，我們只需要放入我們想要屬性的類的名稱，如下所示：
￥And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
.bordered 類的屬性現在將出現在 #menu a 和 .post a 中。（請注意，你也可以將 #ids 用作混入。）
￥The properties of the .bordered class will now appear in both #menu a and .post a. (Note that you can also use #ids as mixins.)
嵌套
￥Nesting
Less 使你能夠使用嵌套代替級聯，或與級聯結合使用。假設我們有以下 CSS：
￥Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
在 Less 中，我們也可以這樣寫：
￥In Less, we can also write it this way:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
生成的代碼更加簡潔，并且模仿了 HTML 的結構。
￥The resulting code is more concise, and mimics the structure of your HTML.
你還可以使用此方法將偽選擇器與混入打包在一起。這是經典的 clearfix hack，重寫為混入（& 代表當前選擇器父級）：
￥You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (& represents the current selector parent):
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
￥Learn More About Parent Selectors
嵌套的 @ 規則和冒泡
￥Nested At-Rules and Bubbling
諸如 @media 或 @supports 之類的 @ 規則可以以與選擇器相同的方式嵌套。@ 規則放在最前面，與同一規則集中其他元素的相對順序保持不變。這稱為冒泡。
￥At-rules such as @media or @supports can be nested in the same way as selectors. The at-rule is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.
.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;
}
}
輸出：
￥outputs:
.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;
}
}
操作
￥Operations
算術運算 +、-、*、/ 可以對任何數字、顏色或變量進行運算。如果可能，數學運算會考慮單位并在加、減或比較之前轉換數字。結果在最左邊有明確說明的單位類型。如果轉換不可能或沒有意義，則忽略單位。不可能轉換的例子：px 到 cm 或 rad 到 %。
￥Arithmetical operations +, -, *, / can operate on any number, color or variable. If it is possible, mathematical operations take units into account and convert numbers before adding, subtracting or comparing them. The result has leftmost explicitly stated unit type. If the conversion is impossible or not meaningful, units are ignored. Example of impossible conversion: px to cm or rad to %.
// 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 將按原樣對數字進行運算，并將明確聲明的單位類型分配給結果。
￥Multiplication and division do not convert numbers. It would not be meaningful in most cases - a length multiplied by a length gives an area and css does not support specifying areas. Less will operate on numbers as they are and assign explicitly stated unit type to the result.
@base: 2cm * 3mm; // result is 6cm
你還可以對顏色進行算術運算：
￥You can also do arithmetic on colors:
@color: (#224488 / 2); // result is #112244
background-color: #112244 + #111; // result is #223355
但是，你可能會發現 Less 的 顏色函數 更有用。
￥However, you may find Less's Color Functions more useful.
從 4.0 開始，不會使用 / 運算符在括號外執行除法。
￥From 4.0, No division is performed outside of parens using / operator.
@color: #222 / 2; // results in `#222 / 2`, not #111
background-color: (#FFFFFF / 16); //results is #101010
你可以改變 數學 設置，如果你想讓它一直有效，但不推薦。
￥You can change Math setting, if you want to make it always work, but not recommended.
calc() 異常
￥calc() exception
發布于 v3.0.0
￥Released v3.0.0
為了 CSS 兼容性，calc() 不計算數學表達式，但會計算嵌套函數中的變量和數學。
￥For CSS compatibility, calc() does not evaluate math expressions, but will evaluate variables
and math in nested functions.
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // result is calc(50% + (25vh - 20px))
轉義
￥Escaping
轉義允許你使用任意字符串作為屬性或變量值。~"anything" 或 ~'anything' 中的任何內容都按原樣使用，除了 插值 之外沒有任何變化。
￥Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
結果是：
￥results in:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
注意，從 Less 3.5 開始，你可以簡單地寫：
￥Note, as of Less 3.5, you can simply write:
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
在 3.5+ 中，許多以前需要 "引號轉義" 的案例不再需要了。
￥In 3.5+, many cases previously requiring "quote-escaping" are not needed.
函數
￥Functions
Less 提供了許多函數，可以轉換顏色、操作字符串和進行數學運算。它們在 函數參考手冊 中有完整的記錄。
￥Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.
使用它們非常簡單。以下示例使用百分比將 0.5 轉換為 50%，將基色的飽和度增加 5%，然后將背景顏色設置為亮 25% 并旋轉 8 度的顏色：
￥Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
命名空間和訪問器
￥Namespaces and Accessors
（不要與 CSS @namespace 或 命名空間選擇器 混淆）。
￥(Not to be confused with CSS @namespace or namespace selectors).
有時，出于組織目的或只是為了提供一些封裝，你可能希望對混入進行分組。你可以在 Less 中非常直觀地做到這一點。假設你想在 #bundle 下打包一些混入和變量，以供以后重用或分發：
￥Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less. Say you want to bundle some mixins and variables under #bundle, for later reuse or distributing:
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
現在如果我們想在我們的 #header a 中混合 .button 類，我們可以這樣做：
￥Now if we want to mixin the .button class in our #header a, we can do:
#header a {
color: orange;
#bundle.button(); // can also be written as #bundle > .button
}
注意：如果你不希望它出現在你的 CSS 輸出中（即 #bundle .tab），請將 () 附加到你的命名空間（例如 #bundle()）。
￥Note: append () to your namespace (e.g. #bundle()) if you don't want it to appear in your CSS output i.e. #bundle .tab.
映射
￥Maps
從 Less 3.5 開始，你還可以使用混入和規則集作為值映射。
￥As of Less 3.5, you can also use mixins and rulesets as maps of values.
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
如預期的那樣輸出：
￥This outputs, as expected:
.button {
color: blue;
border: 1px solid green;
}
作用域
￥Scope
Less 中的作用域與 CSS 中的作用域非常相似。首先在本地查找變量和混入，如果找不到，則從 "父級" 作用域繼承。
￥Scope in Less is very similar to that of CSS. Variables and mixins are first looked for locally, and if they aren't found, it's inherited from the "parent" scope.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
與 CSS 自定義屬性一樣，混入和變量定義不必放在引用它們的行之前。所以下面的 Less 代碼與前面的例子是一樣的：
￥Like CSS custom properties, mixin and variable definitions do not have to be placed before a line where they are referenced. So the following Less code is identical to the previous example:
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
注釋
￥Comments
塊式注釋和行內注釋都可以使用：
￥Both block-style and inline comments may be used:
/* One heck of a block
* style comment! */
@var: red;
// Get in line!
@var: white;
導入
￥Importing
導入工作與預期的差不多。你可以導入一個 .less 文件，其中的所有變量都將可用?？蛇x地為 .less 文件指定擴展名。
￥Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.
@import "library"; // library.less
@import "typo.css";