菜鸟说Less

在项目开发中，会发现其实很多css代码都是重复的，我们采取的方法一般都是复制粘贴，但是如果修改的时候，就要找到所有的这个属性进行修复，特别麻烦。这里推荐大家使用Less，会使css代码非常简单。

1、变量

一般以@开头

@a:300px;

.box{

width:@a;

height:@a;

border:1px solid dash;

}

2、混合

可以带参数(其实和js的带参函数差不多)

.bor(@border-width:2px;){

border:@border-width solid black;

}

.text{

.bor();//border-width默认为2px

.bor(3px);//border-width为3px

}

3、匹配模式

比如三角的实现（在项目中一般会需要向上、向下、向左、向右的三角箭头）

.triangle{

width:0;

height:0;

overflow:hidden;

border-width:10px;

border-color:transparent  transparent gray transparent;

}

这是向下的倒三角，如果项目突然需要向下，向左的三角，或者需要比10px大的三角，或者比10px小的，那你再这么写的话就比较重复了，我们可以这么来

.tran(top，@width:10px，@color:#ccc){

width:0;

height:0;

overflow:hidden;

border-width:@width;

border-color:transparent  transparent @color transparent;

}

.tran(bottom，@width:10px，@color:#ccc){

width:0;

height:0;

overflow:hidden;

border-width:@width;

border-color: @color transparent transparent  transparent;

}

.tran(left，@width:10px，@color:#ccc){

width:0;

height:0;

overflow:hidden;

border-width:@width;

border-color: transparent @color transparent  transparent;

}

.tran(right，@width:10px，@color:#ccc){

width:0;

height:0;

overflow:hidden;

border-width:@width;

border-color: transparent  transparent  transparent @color ;

}

#left{

.tran(left);

}

我们还可以把多余的部分提取出来

.tran(@_,@width,@color){

width:0;

height:0;

overflow:hidden;

}

(@_的意思就是不管匹配了谁，我都跟着，就是不管我匹配了向上的箭头还是向下的箭头，我都会在那个选择器里)

4、运算

Less具有 + - * / 的能力。

@x:10px;

.box2{

width:@x+10;//宽为20px

height:（@x+1）*2;//高位22px

color:#ccc-10;//Less会把颜色变为255进制的，然后再进行加减乘除运算，但这个一般用不到，我们想要什么颜色直接取色器直接吸就可以得到了

}

5、嵌套

#list{
    width:200px;
    margin: 30px auto;
    list-style-type: none;
    li{
        height:30px;
        line-height: 30px;
        a{
            float: left;
            color:blue;
            &:hover{
                color:red;
             }
        }
    }
}
&代表他的上一层选择器

<ul id="list">
    <li><a><span>首页</span></a></li>
    <li><a><span>设计</span></a></li>
    <li><a><span>关于</span></a></li>
</ul>

6、@arguments变量

(能用到的地方不是特别多，做一个了解就行了，@arguments变量包含了所有传递进来的参数)

.box3(@x,@y,@c){

border:@x @y @c;//其实这个和border:@arguments意思相同

}

7、避免编译

有时候我们需要输出一些不正确的css语法或者使用一些Less不认识的语法时，需要在字符串前面加上“~”

8、！important

加了这个关键字，优先级会变高。

好了，就写到这吧，我也是个新手，写得不好不要见怪，谢谢