Less.js簡單介紹

Less是一門向後兼容的CSS 預處理語言。使 CSS 更易維護和擴展。
安裝
在服務器上安裝less最簡單方法是通過node.js軟件包管理npm安裝，-g全局安裝

npm install less -g

Less的新功能：

1.新增變量

在樣式表中相同的值重複n多次，使用變量控制這些值，使代碼更易於維護。

@link-color: #428bca; 
a, .link { color: @link-color; }
div {backgroud:  @link-color; }

2.混合（Mixins）
將一個規則集包含到另一個規則集裏去。
例如：定義一個類class = ‘myborder’：

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

在其它規則中需要使用這個類裏的屬性

#menu a {
  color: #111;
  .myborder();  // 這裏
}

3.嵌套
css代碼如下：

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

用 Less 語言改寫代碼如下：
用 Less 書寫的代碼更加簡潔，並且模仿了 HTML 的組織結構。

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

4、@規則嵌套和冒泡
@規則可以和選擇器以相同方式嵌套，@規則會被放在前面。
同一規則集裏其他元素的相對順序保持不變，叫做冒泡
Less代碼

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

編譯爲:

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

5、運算
如果可能的話，算術運算符在加、減或比較之前會進行單位換算。計算的結果以最左側操作數的單位類型爲準。

@color: #224488 / 2; //結果是 #112244
background-color: #112244 + #111; // 結果是 #223355

6、轉義

// 3.5+版本Less
@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

編譯爲：

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

7、函數
Less內置了多種函數用於轉換顏色、處理字符串、算術運算等
例如：用·percentage函數把0.5轉換成50%，用saturate將顏色飽和度增加5%

@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  }

8、命名空間和訪問符
將一些混合（mixins）和變量置於 #bundle 之下，爲了以後方便重用或分發：

#bundle() {
  .button {
    border: 1px solid black;
  }
  .tab { ... }
  .citation { ... }
}

如果想把.button 混合到另一個規則裏面

#header a {
  color: orange;
  #bundle.button(); //如果不希望它們出現在輸出的 CSS 中，例如 #bundle .tab，請將 () 附加到命名空間（例如 #bundle()）後面。
}s

9、maps映射
通過key: 對象[屬性]的格式來實現映射

#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];   // color輸出：blue
  border: 1px solid #colors[secondary];    // 1px solid green

10、作用域
less的作用域與css的作用域類似。先在本地查找變量和混合，若找不到，則從父級作用域繼承

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