Less是什么
Less是一種動(dòng)態(tài)的樣式語(yǔ)言，Less擴(kuò)展了CSS的動(dòng)態(tài)行為，比如說(shuō)，設(shè)置變量（variables）匠题、混合書(shū)寫(xiě)模式（mixins）拯坟、操作（operations）和功能（functions）等等但金，而且Less使用了現(xiàn)有的CSS語(yǔ)法。
疑問(wèn)：將less轉(zhuǎn)換成CSS需要配置什么郁季？
Less有什么用呢冷溃？，直接看下面
變量
注意：在Less中的變量實(shí)際上就是一個(gè)“常量”梦裂，因?yàn)樗荒鼙欢x一次
Less
@color: #ffffff;
@color: #dddddd;
#header: {
color: @color;
}
Css
#header {
color:#dddddd;
}
上面的代碼中很明顯的說(shuō)明了后面的@color覆蓋了前面的@color
另外似枕，變量還有計(jì)算的功能
混入（Mixins）
混入就是一種嵌套，它允許你將一個(gè)類(lèi)嵌入到另一個(gè)類(lèi)中年柠，而被嵌入的這個(gè)類(lèi)也被稱(chēng)為一個(gè)變量凿歼。
個(gè)人理解：就是你自己行一個(gè)類(lèi)（就當(dāng)做一個(gè)變量吧或者有時(shí)候可以認(rèn)為它是一個(gè)帶有參數(shù)的functions），然后將這個(gè)類(lèi)嵌入到另一個(gè)類(lèi)中當(dāng)做它的屬性
Less
.common(@radius:5px) {
border-radius: @radius;
}
#header {
.common;
}
#footer {
.common;
}
解析成CSS
#header {
border-radius: 5px;
}
#footer {
border-radius: 5px;
}
混入函數(shù)還有一個(gè)名詞叫做“混入?yún)?shù)”冗恨，就是說(shuō)可以接受變量參數(shù)
.common(@radius) {
border-radius: @radius;
}
#header {
.common(10px);
}
#footer {
.common(20px);
}
解析成Css
#header {
border-radius: 10px;
}
#footer {
border-radius: 20px;
}
當(dāng)然也可以不用帶參數(shù)
嵌套規(guī)則
這里需要注意的是答憔，&符號(hào)，在Less中嵌套有&解析的是同一個(gè)元素或者這個(gè)元素的偽類(lèi)掀抹，沒(méi)有&解析的是后代元素
Less
.content {
.footer {
color: red;
}
&.header {
color: #ffffff;
}
}
解析成CSS
.content .footer{
color: red;
}
.content.header {
color: #ffffff;
}
Function&Operations
注意：Less中的operations主要是針對(duì)任何數(shù)字虐拓、顏色、變量的操作傲武，可以對(duì)其加減乘除或者更加復(fù)雜的運(yùn)算蓉驹。而function主要Color functions
命名空間
上面所說(shuō)，我們把一些變量或者mixins組織起來(lái)揪利，并將它封裝态兴，想用的時(shí)候把一部分取出來(lái)使用。
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
使用
#header a {
color: orange;
#bundle > .button;
}
變量范圍——scope
采用就近原則疟位，也就是說(shuō)元素先找本省有沒(méi)有這個(gè)變量存在瞻润，如果存在，就取得這個(gè)變量，不存在則尋找父元素敢订，以此類(lèi)推
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
總結(jié)：上面只是常用的一些功能王污，less的功能遠(yuǎn)不僅僅是這些！
