Less
一谷扣，什么是less驯遇？
Less?是一種動(dòng)態(tài)樣式語(yǔ)言芹彬，可以說(shuō)是css的升級(jí)，因?yàn)樗麑儆赾ss預(yù)處理語(yǔ)言的一種叉庐。他使用類似css的語(yǔ)法舒帮，為css賦予了動(dòng)態(tài)語(yǔ)言的特性。大部分體現(xiàn)在變量、繼承玩郊、運(yùn)算肢执、函數(shù)等方面。方便了css的編寫(xiě)和維護(hù)译红。
二蔚万，什么是預(yù)處理css？
? ? 預(yù)處理css就是語(yǔ)言的超集临庇，比css更豐滿反璃。CSS預(yù)處理器為CSS增加一些編程的特性，無(wú)需考慮瀏覽器的兼容性問(wèn)題假夺，例如你可以在CSS中使用變量淮蜈、簡(jiǎn)單的邏輯程序、函數(shù)等等在編程語(yǔ)言中的一些基本特性已卷，可以讓你的CSS更加簡(jiǎn)潔梧田、適應(yīng)性更強(qiáng)、可讀性更佳侧蘸，更易于代碼的維護(hù)等諸多好處裁眯。
預(yù)處理css大概分類有：Sass(SCSS),less,stylus,turbine,swithch CSS,CSS Cacheer,DT CSS等等。其中最好的是Sass讳癌，less和stylus穿稳。
三，less語(yǔ)法：
//?注釋模板晌坤，less里的注釋會(huì)轉(zhuǎn)換成css后被刪除逢艘。
/*?這樣的注釋不會(huì)被刪除，在css中仍然會(huì)保留*/骤菠。
四它改、定義變量：
@變量名：變量值；
?eg：? ?@bgColor: #f5f5f5 ; ?? ??? ???
body{
width:@變量名商乎；
?? background-color：@bgcolor央拖；??
}
==>轉(zhuǎn)換成css
body{ ?? ??? ??? ?
width: 變量值 ; ?? ??? ?
background-color: #f5f5f5;
}
五，嵌套：
如果你在css中經(jīng)常使用自帶選擇器的話鹉戚，那么less的嵌套語(yǔ)法使用起來(lái)會(huì)感覺(jué)非常爽的鲜戒！
.container {
width: @containerWidth;
> .row {
height: 100%;
a{
color: #f40;
&:hover{
color: #f50;
}
}
}
div {
width: 100px;
.hello {
background-color: #00f;
}
}
}
==>轉(zhuǎn)換成css
.container {
width: 1024px;
}
.container > .row {
height: 100%;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f50;
}
.container div {
width: 100px;
}
.container div .hello {
background-color: #00f;
}
六、Mixin
/* 定義一個(gè)類 */
.roundedCorners(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/* 定義的類應(yīng)用到另個(gè)一個(gè)類中 */
＃header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
七崩瓤，Import
一般情況下可以在開(kāi)發(fā)階段將樣式放到多個(gè)文件中袍啡，最后通過(guò)@import的方式進(jìn)行合并。
// main.less
@btnColor: red;
@import url('_buttom.less');
body{
width: 1024px;
}
// _buttom.less
.btn{
color: @btnColor;
}
==>轉(zhuǎn)成css
.btn{
color: red;
}
body{
width: 1024px;
}
八却桶，函數(shù)
??內(nèi)置函數(shù)：
?? ?lighten：將一個(gè)顏色變亮
lighten(#000, 10%); // #1a1a1a
?? ??darken：將一個(gè)顏色變暗
darken(#000, 10%); // #e6e6e6
