LESS总结

注释

可以使用   /**/      会被编译成css也可使用   //        不会被编译成css

变量

使用@声明变量

//CSS.box {width：300px;}//LESS@test_width：300px;.box {width：@test_width;}

混合

混合变量

已有一个类，想要在同一对象上添加新的类。

可以直接在上一个class末尾添加 .新类名

然后，在旧类外面定义新类的属性值。

调用时不带括号！！！

.旧类{    width:200px;    .新类;}.新类{    height:300px;}

混合 - 可带参数

调用时带括号！！！

.旧类{    width:200px;    .新类(20px);}.新类(@border_width){    border:@border_width solid yellow;}

可以用来设定默认值

.旧类{    width:200px;    .新类();}.新类(@border_width:20px){    border:@border_width solid yellow;}

匹配模式

譬如上下左右都设立一个不同的类，它们的第一个参数作为匹配项，当调用时带有哪个参数，就运用哪个类。


必须选择，第一个参数为“@_”。

//设置类.hello(top){    top:0;}.hello(bottom){    bottom:0;}.hello(left){    left:0;}.hello(right){    right:0;}.hello(@_){    background:#fff;}//调用.say{    .hello(left);      //left:0  background:#fff;}

运算

任何数字、颜色或者变量都可以参与，运算应被包裹在括号里。

例如，+-* /。

@test_01 = 100px;box{width: (@test_01 - 20) * 5; }   

嵌套

html结构： ul > li > a

ul{    li {}     a {}}

对伪类使用

CSSli a{}li a:hover{}LESSli {    a{        &hover{}   //&->上一层，也就是a    }}

@arguments变量

@arguments包含了所有传递进来的参数

如果你不想单独处理每一个参数的话就可以像这么写：

border_arg(@w:30px,@c:red,@xx:solid){border:@arguments }@arguments包含了@w:30px,@c:red,@xx:solid

避免编译

在我们需要输入一些不正确的css语法或者使用一些less不认识的专有语法时使用。

在字符串前加上一个~即可

.test{    width: ~'calc(300px - 30px)';    //~'...'把引号里的内容原样传给客户端}

!important

适合用来调试，一般不会用到

.test{
display:block !important;　　　　//给所有元素加上display:block
}