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)';//（原封不动的输出，避免编译）