Less在CSS語法的基礎上進行了擴展，主要包含：

Variables（變量）
Mixins（混合書寫）
Nested Rules（嵌套規則）
Functions & Operations（功能和操作）
Client-side usage（客戶端使用）
Server-side usage（服務端使用）

使用Less

Server-side usage

npm安裝

npm install -g less

命令行使用

輸出到stdout，直接在控制檯顯示

lessc styles.less

保存爲文件

lessc styles.less styles.css

如果需要壓縮，要先安裝clean-css插件，然後執行命令

lessc --clean-css styles.less styles.min.css

在代碼中使用

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, output) {
    console.log(output.css);
});

Client-side usage

link中的rel設置成stylesheet/less
先引入less文件，再引入less.js腳本

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

下載less.js

需要注意的是，在瀏覽器中使用Less雖然入門簡單、開發便捷，但在實際項目中因爲要考慮性能問題，一般推薦在服務端用node.js或其他第三方工具使用

語言特性

Variables

定義變量

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

#header {
    color: @light-blue;
}

輸出

#header {
    color: #6c94be;
}

注意，Less中變量相當於“常量”，因爲它們只能被定義一次

變量也可以用在選擇器、屬性名和字符串拼接中，用@{變量名}形式

/*注意：如果定義成@dialog: .dialog-class;這種有連字符 - 的變量值
 *要寫成@dialog: dialog-class;
 *然後這樣使用：
 *.@{dialog}
 *否則編譯會報錯 NameError: variable @dialog is undefined
 *然而使用下劃線 _ 則沒有這個問題，這是個坑
 */
@dialog: .dialogClass;

@{dialog}{
    width: 200px;
}

結果

.dialogClass {
  width: 200px;
}

Mixins

一個規則集合應用到另一個規則集合中，例如

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

我們想要將這些屬性應用到別的規則集合中，直接用類名（也可以是id）代替這些屬性就行了

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

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

可以定義不帶參數或帶參數的Mixin，供調用，不輸出css

//不帶參數
.animal(){
    color: #000000;
}

//帶參數
.dog(@h;@t){  //也可以用,進行分隔，但css中如background、border等樣式屬性支持屬性值組，而,則作爲屬性值組元素分隔符，因此推薦使用;作爲參數分隔符
    height: @h;
    border: @t;
}

#doge{
    .animal();
    .dog(5px;1px);
}

輸出：

#doge {
    color: #000000;
    height: 5px;
    border: 1px;
}

Mixin中內置了兩個特殊的對象，@arguments和@rest
@arguments與JavaScript中函數的arguments對象類似，表示傳入的所有參數
@rest則表示…參數

.dog(@h;@rest...){
    height: @h;
    border: @rest;
}

.cat(@t;@s@c){
    border: @arguments;
}

#doge{
    .dog(5px;1px;solid;yellow);
}

#meow{
    .cat(1px;solid;white);
}

輸出：

#doge {
    height: 5px;
    border: 1px solid yellow;
}
#meow {
    border: 1px solid white;
}

Nested Rules

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

在Less中可以寫成

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

我們也可以在混合書寫模式中使用僞選擇器，用&表示當前選擇器的父選擇器

.clearfix {
    display: block;
    zoom: 1;

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

Operations

加減乘除算術運算可以在任何數字、顏色和變量上操作，如果可能，數學操作將會考慮單位，在操作前會進行換算，運算結果以最左邊有定義的單位爲準
如果單位無法換算或無意義，則會忽略單位

// 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中不支持對這樣的面操作，因此只會對數字進行運算，然後分配最左邊有定義的單位
（好像很有道理，比如2cm * 3mm，如果進行單位換算，最終結果將是0.6cm²，而這個單位在css中暫時並沒有卵用）

@base: 2cm * 3mm; // result is 6cm

顏色的運算會分爲rgba來運算，並且總會輸出一個合法的顏色值，如果顏色值大於ff或小於00，都會被四捨五入成ff或00，對於alpha也是一樣，總在1.0-0.0之間
注意：alpha值的運算未定義，因爲在對顏色的數學操作的意義上沒有達成一致，所以如果對alpha進行運算，可能達不到想要的結果，後期也可能會改變

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

Escaping

可以用任意字符串作爲屬性或變量的值，~"任意字符串"或~'任意字符串'將不會改變，主要用在css hack中

.weird-element {
    content: ~"^//* some horrible but needed css hack";
}

結果：

.weird-element {
  content: ^//* some horrible but needed css hack;
}

Functions

Less提供了許多對顏色、字符串和數學操作的功能，使用方式十分直白（前提是你英語好）
具體可以在Function Reference中查詢

@base: #f04615;
@width: 0.5;

.class {
    width: percentage(@width); // returns `50%`
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
}

Namespaces and Accessors

可以在命名空間中定義一些屬性供以後使用或分發

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

使用：

#header a {
    color: orange;
    #bundle > .button;
}

注：在namespace中定義的變量不能通過#namespace > @var訪問到

Scope

Less中的作用域與其他編程語言類似，現在本地作用域中尋找變量或Mixin，若沒找到，再到上一級作用域中尋找

Comments

兩種註釋方法

//行內
/*
塊級
*/

Importing

import 可以導入其他文件，如果是.less文件，可以不寫後綴

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

參考

lesscss.org
前端構建：Less入了個門

初學Less