概觀

Less（代表精簡樣式表）是 CSS 的向後相容語言延伸。這是 Less 的官方文件，Less 是一種語言，而 Less.js 則是將 Less 樣式轉換成 CSS 樣式的 JavaScript 工具。

由於 Less 看起來就像 CSS，所以學習它很輕鬆。Less 只對 CSS 語言做出一些方便的補充，這就是它可以如此快速學習的原因之一。

有關 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 {
  display: block;
  zoom: 1;

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

深入了解父代選擇器

巢狀 At 規則和冒泡

At 規則（例如 @media 或 @supports）可以像選擇器一樣巢狀。At 規則置於頂端，且相對於同一規則集內其他元素的相對順序保持不變。這稱為冒泡。

.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

如果您想要讓它總是運作，您可以變更數學設定，但這並不建議。

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 提供了各種函數，可轉換色彩、處理字串和進行數學運算。這些函數在函數參考中有完整的說明。

使用它們非常簡單。以下範例使用百分比將 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，只多了一點點。

概觀

變數

混入

巢狀

巢狀 At 規則和冒泡

運算

calc() 例外

跳脫

函數

命名空間和存取器

對應

範圍

註解

匯入