less使用小結

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變數、Mixin（混入）、函數等特性，使 CSS 更易維護和擴展。

Less 可以運行在 Node 或瀏覽器端。

使用之前需要安裝，可以通過npm來進行安裝

$ npm install -g less

1.變數

LESS 允許開發者自定義變數，變數可以在全局樣式中使用，使得樣式修改起來更加簡單。

@mainColor:#E93223;
body{
  color: @mainColor;
}

2.Mixin（混入）

混合（Mixin）是一種將一組屬性從一個規則集包含（或混入）到另一個規則集的方法。

.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 中了

3.嵌套

假設我們有以下 CSS 代碼：

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

用 Less 語言我們可以這樣書寫代碼

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

用 Less 書寫的代碼更加簡潔，並且模仿了 HTML 的組織結構。

你還可以使用此方法將偽選擇器（pseudo-selectors）與混合（mixins）一同使用。下麵是一個經典的 clearfix 技巧，重寫為一個混合（mixin） (& 表示當前選擇器的父級）

.clearfix {
  display: block;
  zoom: 1;

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

4.導入

“導入”的工作方式和你預期的一樣。你可以導入一個 .less 文件，此文件中的所有變數就可以全部使用了。如果導入的文件是 .less 擴展名，則可以將擴展名省略掉：

@import "library"; // library.less 
@import "typo.css";
.f_left{
  float: @right;
}

5.運算及函數

算術運算符 +、-、*、/ 可以對任何數字、顏色或變數進行運算。如果可能的話，算術運算符在加、減或比較之前會進行單位換算。計算的結果以最左側操作數的單位類型為準。如果單位換算無效或失去意義，則忽略單位。無效的單位換算例如：px 到 cm 或 rad 到 % 的轉換。

@back:#333;
.test{
  border: 1px solid @back*2;
  background: lighten(#000, 10%);
  color:darken(#000, 10%);
}

saturate(@color, 10%); // 飽和度增加 10%
desaturate(@color, 10%); // 飽和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 設定透明度為 50%

6.命名空間和訪問符

有時，出於組織結構或僅僅是為了提供一些封裝的目的，你希望對混合（mixins）進行分組。你可以用 Less 更直觀地實現這一需求。假設你希望將一些混合（mixins）和變數置於 #bundle 之下，為了以後方便重用或分發：

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

現在，如果我們希望把 .button 類混合到 #header a 中，我們可以這樣做：

#header a {
  color: orange;
  #bundle.button();  // 還可以書寫為 #bundle > .button 形式
}

7.作用域

Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查找變數和混合（mixins），如果找不到，則從“父”級作用域繼承。

@var: red;

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

與 CSS 自定義屬性一樣，混合（mixin）和變數的定義不必在引用之前事先定義。因此，下麵的 Less 代碼示例和上面的代碼示例是相同的：

@var: red;

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