LESS
總體而言，想象成JS的JQ就行
1.less的注釋
/*text*/ 該注釋能夠編譯到css文件中
//text ??該注釋不能編譯到css文件中
2.定義變量
eg：
@:nav_width：300px；
body{
width:@:nav_width
}
3.混合
eg(混合的一個聲明):
.border{
border:solid 5px pink;
}
.box{
width:300px;
height:300px
.border;
}
帶參數的混合
.border02(@border_width){
border:solid @border_width ?pink;
}
.text{
.border02(30px);
}
混合帶默認值
.border03(@border_width:5px){
border:solid @border_width ?pink;
}
//這是帶默認值的
.text{
.border03();
}
//需要修改默認值的
.text{
.border03(30px);
}
4.匹配模式
.triangle(top,@w:5px,@c:#ccc){
border_width:@w;
border_color:transparent transparebt @c transparent;
border_style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border_width:@w;
border_color:@c transparent transparebt transparent;
border_style:dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border_width:@w;
border_color:transparent @c transparebt transparent;
border_style:dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border_width:@w;
border_color:transparent transparebt transparent @c;
border_style:dashed dashed dashed solid;
}
//不論匹配到誰都需要帶著@_
.trangle{@_,@w:5px,@c:#ccc){
.triangle(top,100px);
width:0;
height:0;
overflow:hidden;
}
.sanjiao{
.trangle(top,5px，pink)
}
5.運算
@text01{
width:320px;
}
.box01{
width:@text01+30;
}
6.嵌套
&對偽類使用
對連接的使用
&item
.list{
margin:5px;
li{
width:50px;
}
a{
? ? ? ?text.decoration:none;
? ? ? //代表他的上一層選擇器，即a
? ? ?&:hover{
? ? color:red;
}
}
}
7.@arguments變量
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments
}
.text{
.border_arg();
}
8.其他
1)避免編譯
~"" ?or ~'' ?不變的輸出，濾鏡
.text_03{
width:~"cale(300px-30px)";
}
2) ！important 優先級最高
.text{
.border03() improtant;
}
