LESS入门二

LESS的匹配模式

类似于JS中的if，但是不完全是。只有满足条件才会匹配：

.triangle(top, @width:5px, @color:#ccc){
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed;
}

.triangle(bottom, @width:5px, @color:#ccc){
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(left, @width:5px, @color:#ccc){
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed dashed solid dashed;
}
.triangle(right, @width:5px, @color:#ccc){
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid;
}
//不管匹配到哪个，这个都会被匹配
.triangle(@_,@width:5px, @color:#ccc){
    width:0;
    height:0;
    overflow:hidden;
}
//使用
.tri{
    .triangle(top,30px,red);
}

top匹配的是第一个和最后一个，因为最后一个是不管怎样都会被匹配的，编译出来的CSS如下:

.tri { border-width: 30px; border-color: transparent transparent #ff0000 transparent; border-style: dashed dashed solid dashed; width: 0; height: 0; overflow: hidden; }

LESS运算

@test_01:300px; .box_02{
    width: @test_01 - 20 * 5;
}

编译出来的CSS为:

.box_02 { width: 200px; }

LESS运算支持加减乘除:

@test_01:300px; .box_03{
    height: @test_01 * 3;
}
.box_04{ height: @test_01 / 3; }

编译出来的CSS为:

.box_03 { height: 900px; }
.box_04 { height: 100px; }

LESS嵌套

CSS不支持嵌套，但是LESS可以，这与html语法格式一致。

如这样结构的html:

<div class="list">
    <li>
        <a href="#">测试文字</a>
    </li>
</div>

less代码：

.list{
    width:600px;
    margin:30px auto;
    list-style:none;
    li{
        height:30px;
        background:green;
    }
    a{
        color:#FFF;
    }
    span{
        float:right;
    }
}

编译出来的CSS如下：

.list { width: 600px; margin: 30px auto; list-style: none; }
.list li { height: 30px; background: green; }
.list a { color: #FFF; }
.list span { float: right; }

a{
    color:#FFF;
    //& 代表上一层选择器
    &:hover{
        color:red;
    }
}

编译出来的CSS：

a { color: #FFF; }
a:hover { color: red; }

arguments变量:

.border_arg(@w:30px, @c:red, @xx: solid){
     border:@arguments;   
}
.test_arguments{
    .border_arg(); 
}

编译出来的CSS：

.test_arguments { border: 30px #ff0000 solid; }

arguments类似于js中的arguments，表示多个参数。

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法。
要输出这样的值，我们可以在字符串前面加上一个 “~”
例如: width:~ “calc(100% - 35)”;

有时我们需要加上!important来表示优先级:

.test{
    width:200px;
    height:200px;
    border:20px solid red;
}
.test_img{
    .test !important;    //.test中所有的样式都会加上!important
}

编译出来的CSS:

.test_img { width: 200px !important; height: 200px !important; border: 20px solid red !important; }

less的基本类容就这么多啦，剩下的主要是在项目中使用。
与SASS相比，LESS的知识点不多，更容易上手。