Less語法學習

Less 是一門 CSS 預處理語言，它擴充套件了 CSS 語言，增加了變數、Mixin、函式等特性，使 CSS 更易維護和擴充套件。Less 可以執行在 Node 或瀏覽器端。

變數

說明：宣告變數的時候，使用@開頭，並且對於宣告的變數，可以進行運算。注意：變數實際上是“常量”，因為它們只能定義一次。舉例如下：

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

輸出：

#header {
  color: #6c94be;
}
 

混入

Mixins是一種將一組屬性從一個規則集包含（“混入”）到另一個規則集中的方法。

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

我們希望在其他規則集中使用這些屬性。好吧，我們只需要刪除我們想要屬性的類的名稱。

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

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

巢狀規則

Less使您能夠使用巢狀代替或與級聯結合使用。另外，將偽選擇器與mixin捆綁在一起。經典的clearfix hack，重寫為mixin（&

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

轉化後：

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

與偽選擇器結合使用，舉例：

.clearfix {
  display: block;
  zoom: 1;

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

巢狀指令和冒泡

media或keyframe可以以與選擇器相同的方式巢狀指令。指令位於頂部，相對於同一規則集內其他元素的相對順序保持不變。這叫做冒泡。
有條件的指令，例如@Media，@supports也@document有選擇器複製到他們的身體：
個人通俗理解：選擇器（.screen-color）寫在最外面，內部的@media巢狀可以理解為 “&” ，即 and 。

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

轉化後：

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

其餘非條件指令，例如font-face或keyframes，被冒泡了。他們的身體沒有改變：

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

轉化後：

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}

操作

算術運算+，-，*，/可以在任意數量，顏色或可變的操作。如果可能，數學運算會考慮單位並在新增，減去或比較數字之前轉換數字。結果最左邊是明確說明的單位型別。如果轉換不可能或沒有意義，則忽略單位。不可能轉換的示例：px到cm或rad到％。

功能

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);
}

名稱空間和訪問器（暫不理解）

範圍（暫不理解）

評論（暫不理解）

輸入

匯入工作幾乎與預期一致。您可以匯入.less檔案，其中的所有變數都可用。可以選擇為.less檔案指定副檔名。

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

可變插值

變數可控制CSS規則中的值，也可在其他地方使用，例如選擇器名稱，屬性名稱，URL和@import語句。

   選擇

// Variables
@my-selector: banner;

// Usage
[email protected]{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

轉化為：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

  網址

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

匯入語句

// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";

屬性

@property: color;

.widget {
  @{property}: #0ee;
  [email protected]{property}: #999;
}

變數名稱

使用變數定義變數

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;
// 輸出結果為content: "I am fnord.";

延遲載入（咱不理解）

預設變數

預設變數的請求 - 只有在尚未設定變數時才能設定變數。此功能不是必需的，因為您可以通過後面的定義輕鬆覆蓋變數。這可以正常工作，因為延遲載入 - 基色被覆蓋，深色是深紅色。

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);
// use of library
@import "library.less";
@base-color: red;