每一門技術的出現都是爲了解決現存的問題，同樣的，Less 的出現是爲了解決 CSS 中過於呆板的寫法。Less 官方文檔 中對 Less 的使用有詳細的介紹，總結一下爲：Less = 變量 + 混合 + 函數。如果你對 js 和 css 有所瞭解，那麼就可以很快的掌握並在你的項目中使用 Less。
一、Less 使用初體驗
1. 使用 Less 寫樣式
使用 Npm 全局安裝 Less
$ npm install less -g
創建一個空文件夾，這裏命名爲：learn-less
在根目錄下創建 index.html 文件，複製內容如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初識 Less</title>
<link href="./main.css" rel="stylesheet">
</head>
<body>
<div class="container">1</div>
<div class="container2">2</div>
<div class="container3">3</div>
</body>
</html>
在根目錄下創建 main.less 文件，複製內容如下：
// main.less
@width: 100%;
@height: 100px;
@color: red;
.container{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
.container2{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
.container3{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}
現在打開瀏覽器看一下，會發現並沒有加載樣式。這是因爲 index.html 中引入的樣式文件是 main.css 而不是 main.less。所以接下來，我們需要將 main.less 轉換爲 main.css，不用擔心，這一步驟並不需要你手動操作，僅僅是運行一條命令就會自動完成轉換。
$ lessc main.less
操作完以上步驟就會發現在根目錄下生成了一個 main.css 文件，此時再打開瀏覽器看看，樣式已經出現了。
main.css 轉義內容爲：
.container {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container2 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container3 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
如果你使用了 Webstorm 作爲開發工具，那麼連手動輸入命令行這一步都可以跳過，因爲 Webstorm 會在你的 .less 文件被修改後自動生成對應的 .css 文件，具體配置跳轉：Webstorm 配置 Less 自動轉譯成 css
2. 感受 Less 的便利
現在有一個新的需求，需要將三個 div 的背景顏色改成藍色（blue），如果是之前 css 的寫法需要依次找到 container、container2、container3，對應修改裏面的 background-color 屬性，但是使用 less 我們僅僅修改前面定義過的變量值即可。
// main.less
@width: 100%;
@height: 100px;
@color: blue;
...
使用 lessc main.less 進行轉譯後打開瀏覽器可以看到三個 div 的背景顏色已經被改變了。
二、變量
在前面介紹的案例中已經使用了“變量”的概念，是不是感覺和 js 很像，事實上 less 就是用 js 的寫法來寫 css。
官網在介紹變量的時候會給出很多應用場景，總結一下就是使用 @ 符號定義變量，使用 @ 符號獲取變量，僅僅將 @變量名 看成是一個字符串。
@classname: main;
@color: red;
.@classname{
background-color: @color;
}
從上面例子中可以看到，變量不僅僅可以作爲樣式屬性值：background-color: @color;，還可以作爲類名：.@classname 表示的就是 .main。這也就是爲什麼說僅僅將 @變量名 看成是一個字符串。
三、混合
先看一個 example.css 文件：
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu p {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
可以看到上面三個樣式中都有 border-top 和 border-bottom 兩個屬性，並且內容完全相同；在傳統 CSS 寫法中只能這樣一遍有一遍的去書寫重複的內容，在 Less 中通過將公共屬性抽取出來作爲一個公共類的方式規避這一點。
// example2.less
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
#menu span {
height: 16px;
.bordered;
}
#menu p {
color: red;
.bordered();
}
將以上 example2.less 進行轉譯成 example2.css 文件爲：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu p {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
可以看到 examle2.css 與 example.css 很相似，只是多了一個 .bordered 樣式。
修改 example2.less，將 .bordered 寫成 .bordered()，此時在進行轉譯之後會看到 example2.css 和 example.css 文件就完全一樣了，使用 less 書寫更加簡單。
// example2.less
.bordered() {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
...
總結：
混合也是減少代碼書寫量的一個方法；
混合的類名在定義的時候加上
小括弧 ()，那麼在轉譯成 css 文件時就不會出現；混合的類名在被調用的時候加上
小括弧 ()和不加上小括弧 ()是一樣的效果，看個人習慣，如：第三行和第八行轉譯成 css 是一樣的。1 #menu span { 2 height: 16px; 3 .bordered; 4 } 5 6 #menu p { 7 color: red; 8 .bordered(); 9 }
四、函數
曾幾何時，在書寫呆板的 css 時有沒有想過讓類名動態化，根據不同的參數生成不同的樣式。看下面的示例：
// func.less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
使用 $ lessc func.less 進行轉譯 func.css 文件內容如下：
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
可以看到，這裏就用到了函數的概念，在 #header 和 .button 中分別傳入不同的參數，結果也就生成不同的代碼。
關於 less 中函數的寫法還有以下幾種：
// 函數的參數設置默認值：
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// 函數有多個參數時用分號隔開
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
// 函數如果沒有參數，在轉譯成 css 時就不會被打印出來，詳見上面混合中的示例
.wrap() {
text-wrap: wrap;
}
// 函數參數如果有默認，調用時就是通過變量名稱，而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
// 函數參數有個內置變量 @arguments，相當於 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
// 函數名允許相同，但參數不同，類似於 java 中多態的概念
.mixin(@color: black) {
.mixin(@color: black; @margin: 10px) {
當然，上面是開發人員自定義的函數，Less 也爲我們定義了很多好用的內置函數。關於內置函數，如果掌握，可以在開發過程中節約很多時間，由於內置函數數量很多，這裏就不一一介紹，傳送門：Less 內置函數官方文檔。
五、父子元素的寫法
在 css 中父子元素的寫法通常如下：
.container {
padding: 0;
}
.container .article {
background-color: red;
}
在 Less 寫法如下，父子嵌套關係一目瞭然。
.container {
padding: 0;
.article {
background-color: red;
}
}
當然，父子元素還要一種是僞類的寫法，在 css 中寫法如下：
#header :after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
在 less 中寫法如下，可以看到引入了新的符號 &，以 & 來代替主類 #header。
#header {
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
六、神奇 @import
在傳統 css 文件中，每個文件都是獨立的。在 less 中可以像 js 的模塊那樣在一個 less 文件中引入另一個 less 文件。
創建 one.less 文件：
.container {
width: 100px;
height: 200px;
}
創建 two.less 文件：
@import "one";
使用 $ lessc two.less 轉譯成 two.css 文件，可以看到內容如下：
.container {
width: 100px;
height: 200px;
}
@import 的作用可以看成是將 one.less 的內容複製一份到當前 .less 文件中。
那麼如果 two.less 中也有一個類名叫 container 的，使用 @import 之後會變成什麼樣子呢？這個留給自行測試好啦。
作者：dkvirus
鏈接：http://www.jianshu.com/p/48018e5da7dd
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。
