Less 之快速入门

版权声明：本文为博主原创文章，未经博主允许不得转载。

Less
是一种动态样式语言，它将CSS赋予了动态语言的特性。如：变量，继承，运算，函数。LESS 既可以在客户端上运行(支持IE 6+,Webkit,Firefox)，也可以借助Node.js或者Rhino在服务端运行。

Ps: Less需要编译，才能转成CSS文件，上一篇文章详细介绍了 我个人比较常用的快速的编译的方法，希望对小伙伴们有所帮助。

#注释
Less

// 注释（该注释不会被编译到CSS文件里面）
/*注释（该注释会被编译到CSS文件里面）*/

Less 编译完成的CSS

/*注释（该注释会被编译到CSS文件里面）*/

#变量
Less

// 变量的声明
@wine_red : #900;
.box{
    background-color: @wine_red;
}

Less 编译完成的CSS

.box{
    background-color: #900;
}

#混合
Less

// 变量的声明
@wine_red : #900;
.box{
    background-color: @wine_red;
    .box_1;
    .box_2(5px);
    .box_3(#09f);
}
// 混合
.box_1(){
    width: 200px;
    height: 200px;
}

// 带参数的混合
.box_2(@radius) {
    border-radius: @radius;
}

// 带默认参数的混合 
.box_3(@color, @border: 6px) {
    border: @border solid @color;
}

Less 编译完成的CSS

.box{
    background-color: #900;
    width: 200px;
    height: 200px;
    border-radius: 5px;
    border: 6px solid #09f;
}

#匹配模式
Less

.angle{
    .triangle(top)
}

// 匹配模式
.triangle(@_, @w:10px, @c:#ccc) {
    width: 0;
    height: 0;
    overflow: hidden;
}
.triangle(top, @w:10px, @c:#ccc) {
    border-width: @w;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @c transparent;
}
.triangle(right,@w:10px, @c:#ccc) {
    border-width: @w;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @c;
}
.triangle(bottom,@w:10px, @c:#ccc) {
    border-width: @w;
    border-style: solid dashed dashed dashed;
    border-color: @c transparent transparent transparent;
}
.triangle(left,@w:10px, @c:#ccc) {
    border-width: @w;
    border-style: dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}

Less 编译完成的CSS

.angle {
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 10px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #ccc transparent;
}

#运算
Less

.box{
    .box_4()
}

// 运算
.box_4(){
    width: 200px - 20;
}

Less 编译完成的CSS

.box {
    width: 180px;
}

#嵌套
Less

// 嵌套
nav{
    ul{
        padding-left: 0;
        font-size: 0;
        li{
            display: inline-block;
            width: 40px;
            height: 20px;
            background-color: #900;
            margin-left: 4px;
            &.item{
                background-color: #098;
            }
            &:hover{
                background-color: #222;
            }
        }
    }
}

Less 编译完成的CSS

nav ul {
    padding-left: 0;
    font-size: 0;
    }
nav ul li {
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: #900;
    margin-left: 4px;
}
nav ul li.item {
    background-color: #098;
}
nav ul li:hover {
    background-color: #222;
}