less基础

less
less的主要特性：
1，变量。 @with
2，混合。类似于在一个选择器里嵌套另一个选择器的属性
3，匹配模式。 在一个选择器里不仅传入参数，而且传个字符串（也就是个参数）

4，@argument。表示所有的参数

变量 @test_width: 100px;
混合

. box{
width: 100px;
height: 100px;
.border;
}
.border{
border: 1px solid #000;
}
可带参数

.border01（@border_width）{
border: 1px solid @border_width;
}

参数默认带值

.border02（@border_width：10px）{
border: 1px solid @border_width;
}

匹配模式

.triangle(right,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;//IE6中边框问题
}
.triangle就相当于是一个“方法”或者说“函数”。
.sanjiao{
.triangle(bottom,100px);
}

嵌套

.list{
li{
}
}
&代表上一层选择器

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

如果你不想单独处理每一个参数的话就可以像这样写：
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments; //@arguments可以把你所传的所有的变量直接带过来，在这里@arguments，就等于border:@w @c @xx;是一个意思
}

Less-避免编译

-有时候我们需要输出一些不正确的CSS语法或者使用一些less不认识的专有语法
-要输出这样的值我们可以在字符串前加上~
例如：.test_03{
width:~calc(300px-30px)';//（原封不动的输出，避免编译）