一、什么是less
less是一種動(dòng)態(tài)樣式語(yǔ)言，屬于css預(yù)處理語(yǔ)言的一種，它使用類似css的語(yǔ)法，為css賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量、運(yùn)算、函數(shù)等。方便了css的編寫(xiě)和維護(hù)。
less可以在多種語(yǔ)言、環(huán)境中使用，包括瀏覽器端、桌面客戶端、服務(wù)端。
本文記錄了開(kāi)發(fā)中最常用的幾種less語(yǔ)法。
二、編譯工具
瀏覽器并不認(rèn)識(shí)less格式文件，我們需要使用編譯工具將less文件編譯成css文件，可以選擇kaola這個(gè)工具編譯。這個(gè)工具使用也十分簡(jiǎn)單，將less文件的目錄拖入，然后設(shè)置輸出路徑。然后每次只要保存less文件就可實(shí)現(xiàn)編譯。
如果使用其他開(kāi)發(fā)工具也可以，比如使用VSCode的話就可以安裝less插件easy less實(shí)現(xiàn)保存自動(dòng)編譯。因?yàn)槲沂褂玫木褪荲SCode編輯器，所以我使用了這個(gè)插件做編譯處理。
基本使用：
首先新建目錄
--images
--style
-- main.less
index.html
編寫(xiě)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>
編寫(xiě)mian.less文件:
@charset "utf-8";
#main {
width: 100px;
height: 100px;
background-color: red;
}
保存編譯后，在style目錄下就會(huì)出現(xiàn)main.css文件，這是編譯后的文件，我們可以直接使用。
三、less語(yǔ)法
1、注釋
less中有兩種注釋：/**/和//。
使用/**/的注釋是會(huì)被編譯進(jìn)css文件的，而使用//的注釋不會(huì)被編譯進(jìn)css文件。
//main.less
@charset "utf-8";
/*我會(huì)被編譯進(jìn)css文件*/
//我不會(huì)被編譯進(jìn)css文件
//執(zhí)行編譯后的main.css
@charset "utf-8";
/*我會(huì)被編譯進(jìn)css文件*/
由于我們應(yīng)該一般編寫(xiě)和維護(hù)less文件，所以我們一般采用第二種注釋，無(wú)需將注釋編譯進(jìn)css文件。
2、變量
less中使用@聲明一個(gè)變量，和一般程序語(yǔ)言不同的是，@符號(hào)與變量之間不能有空格，比如我們要聲明一個(gè)myWidth這個(gè)變量：@myWidth。變量的賦值類似鍵值對(duì)：@myWidth : 200px;
變量的使用：
//less文件
@charset "utf-8";
@myWidth : 200px;
@myHeight : 500px;
#main {
width: @myWidth;
height: @myHeight;
background-color: yellowgreen;
}
3、混合
混合的意思是說(shuō)可以將less寫(xiě)法與常規(guī)的css寫(xiě)法進(jìn)行混合書(shū)寫(xiě)。
css中為某個(gè)元素添加樣式，首先需要為其添加類名，使用混合則很方便
//less文件
@charset "utf-8";
@myWidth : 200px;
@myHeight : 200px;
#main {
width: @myWidth;
height: @myHeight;
background-color: yellowgreen;
.border
}
.border {
border:3px solid pink
}
在css中我們需要將.border這個(gè)類添加到元素的class屬性中才能生效。但是在less中，只要將.border加入#main中就可以實(shí)現(xiàn)效果。
//編譯后的css
@charset "utf-8";
#main {
width: 200px;
height: 500px;
background-color: yellowgreen;
border: 3px solid green;
}
.border {
border: 3px solid green;
}
混合也可以帶參數(shù)
//less
.border(@mywidth){
border: @mywidth solid green;
}
.mybox {
.border(5px);
}
//css
.mybox {
border: 5px solid green;
}
參數(shù)也可以設(shè)置一個(gè)默認(rèn)值：
//less
.border(@mywidth:4px){
border: @mywidth solid green;
}
.mybox {
.border();
}
//css
.mybox {
border: 4px solid green;
}
4、匹配模式
根據(jù)不同的參數(shù)可以匹配不同的樣式：
.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) 傳入不同的參數(shù)，實(shí)現(xiàn)不同的定位方式
}
5、運(yùn)算
less中可以實(shí)現(xiàn)運(yùn)算，任何數(shù)字、顏色或者變量都可以參與運(yùn)算（+ - * /），運(yùn)算應(yīng)該被包裹在括號(hào)中。
//less
.border(@mywidth:4px){
border: @mywidth + 5px solid green; //這里的單位可以省略，但是兩者必須有一個(gè)帶單位
}
.mybox {
.border();
}
//css
.mybox {
border: 4px solid green;
}
6、嵌套
嵌套是less中非常有用、高效的語(yǔ)法。
//html
<div id="list">
<li><a href="#">less學(xué)習(xí)</a><span>2017-11-26</span></li>
<li><a href="#">less學(xué)習(xí)</a><span>2017-11-26</span></li>
<li><a href="#">less學(xué)習(xí)</a><span>2017-11-26</span></li>
</div>
在css中如果我們需要對(duì)這一html結(jié)構(gòu)的樣式進(jìn)行渲染，就會(huì)使用#list、#list li、#list li a、#list li span等選擇器。在less中我們有了更簡(jiǎn)潔的寫(xiě)法：
//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參數(shù)
有時(shí)候我們不想單個(gè)操作參數(shù)，可以使用@argemunts操作參數(shù)。
//less
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg();
}
//css
.test_arguments {
border: 30px red solid;
}
8、避免編譯
有時(shí)候我們需要輸出一些不正確的css語(yǔ)法或者使用一些less不認(rèn)識(shí)的專有語(yǔ)法，要輸出這樣的值我們需要使用~""將語(yǔ)法包裹起來(lái)，語(yǔ)法放在雙引號(hào)或者單引號(hào)中間。從而實(shí)現(xiàn)不讓less編譯該段代碼：
//less
width:~'calc(100%-35)'
//css
width: calc(100%-35);
