一、什么是less
less是一種動態樣式語言，屬于css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變量、運算、函數等。方便了css的編寫和維護。
less可以在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。
本文記錄了開發中最常用的幾種less語法。
二、編譯工具
瀏覽器并不認識less格式文件，我們需要使用編譯工具將less文件編譯成css文件，可以選擇kaola這個工具編譯。這個工具使用也十分簡單，將less文件的目錄拖入，然后設置輸出路徑。然后每次只要保存less文件就可實現編譯。
如果使用其他開發工具也可以，比如使用VSCode的話就可以安裝less插件easy less實現保存自動編譯。因為我使用的就是VSCode編輯器，所以我使用了這個插件做編譯處理。
基本使用：
首先新建目錄
--images
--style
-- main.less
index.html
編寫index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>less編譯工具使用</title>
<link rel="stylesheet" href="./style/main.css"> //在這里引入的是編譯后的css文件
</head>
<body>
<div id="main"></div>
</body>
</html>
編寫mian.less文件:
@charset "utf-8";
#main {
width: 100px;
height: 100px;
background-color: red;
}
保存編譯后，在style目錄下就會出現main.css文件，這是編譯后的文件，我們可以直接使用。
三、less語法
1、注釋
less中有兩種注釋：/**/和//。
使用/**/的注釋是會被編譯進css文件的，而使用//的注釋不會被編譯進css文件。
//main.less
@charset "utf-8";
/*我會被編譯進css文件*/
//我不會被編譯進css文件
//執行編譯后的main.css
@charset "utf-8";
/*我會被編譯進css文件*/
由于我們應該一般編寫和維護less文件，所以我們一般采用第二種注釋，無需將注釋編譯進css文件。
2、變量
less中使用@聲明一個變量，和一般程序語言不同的是，@符號與變量之間不能有空格，比如我們要聲明一個myWidth這個變量：@myWidth。變量的賦值類似鍵值對：@myWidth : 200px;
變量的使用：
//less文件
@charset "utf-8";
@myWidth : 200px;
@myHeight : 500px;
#main {
width: @myWidth;
height: @myHeight;
background-color: yellowgreen;
}
3、混合
混合的意思是說可以將less寫法與常規的css寫法進行混合書寫。
css中為某個元素添加樣式，首先需要為其添加類名，使用混合則很方便
//less文件
@charset "utf-8";
@myWidth : 200px;
@myHeight : 200px;
#main {
width: @myWidth;
height: @myHeight;
background-color: yellowgreen;
.border
}
.border {
border:3px solid pink
}
在css中我們需要將.border這個類添加到元素的class屬性中才能生效。但是在less中，只要將.border加入#main中就可以實現效果。
//編譯后的css
@charset "utf-8";
#main {
width: 200px;
height: 500px;
background-color: yellowgreen;
border: 3px solid green;
}
.border {
border: 3px solid green;
}
混合也可以帶參數
//less
.border(@mywidth){
border: @mywidth solid green;
}
.mybox {
.border(5px);
}
//css
.mybox {
border: 5px solid green;
}
參數也可以設置一個默認值：
//less
.border(@mywidth:4px){
border: @mywidth solid green;
}
.mybox {
.border();
}
//css
.mybox {
border: 4px solid green;
}
4、匹配模式
根據不同的參數可以匹配不同的樣式：
.pos(r) {
position:relative;
}
.pos(a) {
position:absolute;
}
.pos(f) {
position:fixed;
}
.pipei {
width:200px;
height:200px;
background-color:green;
.pos(f); //.pos(r) .pos(a) 傳入不同的參數，實現不同的定位方式
}
5、運算
less中可以實現運算，任何數字、顏色或者變量都可以參與運算（+ - * /），運算應該被包裹在括號中。
//less
.border(@mywidth:4px){
border: @mywidth + 5px solid green; //這里的單位可以省略，但是兩者必須有一個帶單位
}
.mybox {
.border();
}
//css
.mybox {
border: 4px solid green;
}
6、嵌套
嵌套是less中非常有用、高效的語法。
//html
<div id="list">
<li><a href="#">less學習</a><span>2017-11-26</span></li>
<li><a href="#">less學習</a><span>2017-11-26</span></li>
<li><a href="#">less學習</a><span>2017-11-26</span></li>
</div>
在css中如果我們需要對這一html結構的樣式進行渲染，就會使用#list、#list li、#list li a、#list li span等選擇器。在less中我們有了更簡潔的寫法：
//less
#list {
width: 600px;
margin: 30px auto;
list-style: none;
padding: 0;
li {
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
a {
float: left;
}
span {
float: right;
}
}
}
//css
#list {
width: 600px;
margin: 30px auto;
list-style: none;
padding: 0;
}
#list li {
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
}
#list li a {
float: left;
}
#list li span {
float: right;
}
在less中使用偽類選擇器也十分方便：
//less
#list li a {
float: left;
&:hover {
font-size:20px;
}
}
//css
#list li a:hover {
font-size: 18px;
}
7、arguments參數
有時候我們不想單個操作參數，可以使用@argemunts操作參數。
//less
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg();
}
//css
.test_arguments {
border: 30px red solid;
}
8、避免編譯
有時候我們需要輸出一些不正確的css語法或者使用一些less不認識的專有語法，要輸出這樣的值我們需要使用~""將語法包裹起來，語法放在雙引號或者單引號中間。從而實現不讓less編譯該段代碼：
//less
width:~'calc(100%-35)'
//css
width: calc(100%-35);
