Less是什么
Less類似于jQuery。
——是一種css動態(tài)語言，屬于css預處理語言的一種。它使用類似css的語法，為css賦予動態(tài)語言的特性，如變量、繼承、函數(shù)、運算等，更方便css的維護與編寫。
注釋
/**/ ：編譯時保留，編譯后的css文件中也能看到注釋
//：編譯時忽略，編譯后的css文件中看不到
定義變量
用符號@來定義變量
- 例
定義：
@width:300px;
使用：
.box{width:@width;}
混合
編寫可重用樣式
例：
.border{
border:solid 5px #fff;
}
.box{
.border;
margin:10px;
}
帶參數(shù)的混合
例：
.border(@border_width){
border:solid @border_width #fff;
}
.test{
.border(30px);
}
帶默認值的混合
例：
.border(@border_width:30px){
border:solid @border_width #fff;
}
.test{
.border();/*不報錯，默認傳入30px,若傳入?yún)?shù)，則參數(shù)覆蓋默認值*/
}
匹配模式
例：
.position(r){
position:relative;/*相對定位*/
}
.position(a){
position:absolute;/*絕對定位*/
}
.position(f){
position:fixed;/*靜止*/
}
.test{
.postion(a);/*使用絕對定位*/
}
運算
@width:300px;
.box{width:@width+20px;}
嵌套
例：
li{
a{
color:#ff0000;
&:hover{#color:#0000ff;}/*&代表它的上一層選擇器*/
}
span:{color:#00ff00}
}
相當于：
li a{color:#ff0000;}
li a:hover{color:#0000ff;}
li span{color:#00ff00}
@arguments變量
@arguments包含了傳進來的所有參數(shù)。
例：
.test_border(@color:#fff,@so:solid,@width:30px){
border:@arguments;
}
避免編譯
語法：~''
