1 less中的變量

//對值進行聲明
@link-color: #ccc//定義變量名稱
.@{sleName} {}@bg: background-color;
//定義屬性名稱
.container {@{bg}: red;
}

2 繼承（復用重復樣式）

//繼承必須位于選擇器最后
//繼承選擇器名不能為變量
.a:hover:extend(.b) {}.a {&:extend(.b,.c,.d) {}
}.b {.c{}
}
//繼承嵌套結構內樣式需要加上all
.a:extend(.b all) {}

3 混合

用于值不確定的場景

//@arguments表示傳入的所有參數
.flex(@flex： 1){flex: @flex
}.a {.flex(2);
}//條件mixins
.bg (@color; @width) when (@width >= 50%) {}

4 合并

//相同步驟需要把符號改成+_
.mixin(){transform+_: scale(2);
}

5 將顏色字符串轉換為可以使用的顏色

.color {color: color("#fff");
}

6 獲取圖片文件的尺寸

.img {width: image-width("file.png");height: image-height("");background-size: image-size("file.png");
}

7 單位轉換函數

.convert {time: convert(9s,"ms");
}

8 將內聯資源轉換為base64或text/html格式

.img {background: data-uri('../data/image.jpg');
}

9 實踐

.flex(@jc:center,@ai:center, @fd: row, @fw: nowrap) {display: flex;justify-content: @jc;align-items: @ai;flex-direction: @fd;flex-wrap: @fw;
}.flex_sb_c_w {.flex(space-between,center,row,wrap);
}