什么是LESSCSS
LESCSS是一種動(dòng)態(tài)樣式語言，屬于CSS預(yù)處理語言的一種，它使用類似CSS的語法，為CSS賦予了動(dòng)態(tài)語言的特性，如變量、繼承、運(yùn)算、函數(shù)等，也就是說，我們按照less的標(biāo)準(zhǔn)來寫代碼，最后編譯成css的代碼，更方便CSS的編寫和維護(hù)。
LESS的基本語法
注釋
//我是注釋，而且不會(huì)被編譯
/我是注釋而且要被編譯/
eg：
@charset "utf-8";
body{
/*把背景設(shè)置為red色（這句話在css文件里有）*/
background-color:red; //把背景設(shè)置為red色（這句話在css文件里沒有）
}
## 變量
申明變量用@然后取上變量的名字冒號(hào)后跟變量值，使用的時(shí)候@和變量名一起用。
- less代碼：
@charset "utf-8"
@suiBianQuMing:200px;
.div {
width:@suiBianQuMing;
height:@suiBianQuMing;
background-color:red;
}
- 輸出的css代碼：
@charset "utf-8"
.div {
width:200px;
height:200px;
background-color:red;
}
## 混合
- 不帶參數(shù)：
.div1 {
width:200px;
height:200px;
backgorund-color;red;
}
.div2 {
border:1px solid red;
.div1
}
- 帶參數(shù)，不帶默認(rèn)值：
.div1(@w) {
border:solid red @w;
}
.div2 {
widthz;200px;
height:200px;
.div2(30px);
}
- 帶參數(shù)，帶默認(rèn)值：
.div1(@w:3px) {
norder:solid red @w'
}
.div2 {
widthz;200px;
height:200px;
.div2(); //不傳參（但是得有小括號(hào)），默認(rèn)就是3px，傳參就是新值
}
## 匹配模式
- 1
.mydiv(one, @w:200px, @h:200px) {
width: @w;
height: @h;
border:1px solid red;
}
.mydiv(two, @w:200px, @h:200px) {
width:@w;
height: @h;
border: 2px solid blue;
}
.mydiv(three, @w:200px, @h:200px) {
width:@w;
height: @h;
border:3px solid pink;
}
.div2 {
background-color: green;
.div(two) //匹配第二種，后面兩個(gè)參數(shù)選擇默認(rèn)值
}
- 匹配必帶參項(xiàng)
1. 必帶項(xiàng)的名字取為@_
2. 其他匹配后面的參數(shù)也得加上
.mypos(r, @w:200px, @h:200px) {
width:@w;
height:@h;
position:relative;
}
.mypos(f, @w:200px, @h:200px) {
width:@w;
height:@h;
position:fixed;
}
.mypos(@_, @w:200px,@h:200px) { //匹配必帶項(xiàng)
background-color: green;
}
.div2 {
.mypos(r) // 匹配第一種，后面的兩個(gè)參數(shù)選默認(rèn)值，并且還帶上了匹配必帶項(xiàng) 注：如果匹配到了不存在了，比如參數(shù)不是r是s，這時(shí)候只會(huì)有必帶項(xiàng)的代碼翻譯
}
## 運(yùn)算
- 加減乘除
@testz:10px;
.div {
width:@test + 10 ; //變量有單位，運(yùn)算時(shí)新數(shù)據(jù)不用帶單位
color:#f011 + 10; // 顏色也可以運(yùn)算，先把顏色按照16進(jìn)制的算法做加法在變成對(duì)應(yīng)的顏色，但是顏色的運(yùn)算很少
}
## 嵌套
<ul class = "ul1">
<li><a href=”#”>測(cè)試</a><span>10:30</span></li>
<li><a href=”#”>測(cè)試</a><span>10:31</span></li>
<li><a href=”#”>測(cè)試</a><span>10:32</span></li>
<li><a href=”#”>測(cè)試</a><span>10:33</span></li>
</ul>
對(duì)于嵌套標(biāo)簽，以前寫css時(shí)總是這樣表達(dá)：
<style>
.ul1{}
.ul1 li{}
.ul1 a{}
.ul1 span{}
</style>
- less的嵌套這樣寫（a寫在li里面還是.ui1里面？ 看生成的css的代碼有什么不同）
.ul1 {
xxxx
li {
xxxx
a {
xxxx
}
}
}
- &
&代表嵌套的上一級(jí)選擇器
css hover 寫法：
a{}
a:hover{}
less 寫法：
a{
&:hover {} //這里&代表它的上一級(jí)就是a
}
## arguments
.div (@w:1px, @c:red, @s:solid) {
border: @w @c @s;
}
.div1 {
.div(2px)
}
用 arguments 效果一樣
.div(@w:1px, @c:red, @s:solid) {
border:@arguments;
}
.div1 {
.div(2px)
}
