动态样式语言--LESSCSS

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如注释、变量、混合、嵌套、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

首页- LESSCSS中文官网：http://www.1024i.com/demo/less/

Less中文网：http://www.lesscss.net/

开发工具Koala：http://koala-app.com/index-zh.html

1.less中的注释：

/**/是被编译的
//是不会被编译的。建议使用//去注释！

2.less中的变量：

    //
    @test_width:300px;
        .box{
            width:@test_width;
            height:@test_width;
            background:yellow;
        }

3.less中的混合：不带参数、带参数和带默认值参数的

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

        //混合:重用样式;
        .border{border:1px solid #000;}

        #box{
            width:@test_width;
            height:@test_width;
            background:yellow;
            .border;
        }
        //混合：可带参数
        .border_2(@border_width){
            border:@border_width solid blue;
        }
        //混合：带默认值的参数
        .border_3(@border_width:5px){
            border:@border_width solid #ddd;
        }

应用场景：

        //混合的例子:css3写兼容性;
        .border_radius(@radius:5px){
            -webkit-border-radius:@radius;
            -moz-border-radius:@radius;
            border-radius:@radius;
        }

4.less的匹配模式：

//匹配模式：只做三角形、定位

/*通过自动匹配，来动态选择对应样式，例如实现一个css三角形：*/
.sanjiao{
    width:0;height:0;overflow:hidden;
    border:10px;
    border-color: transparent transparent #000 transparent;
    border-style: solid solid dashed solid ;
}
/*匹配模式开始：*/
//上
.triangle(top,@w:10px,@c:#ccc){
    border-width:@w;
    border-color:transparent transparent @c transparent;
    border-style:solid solid dashed solid;
}
//下
.triangle(bottom,@w:10px,@c:#ccc){
    border-width:@w;
    border-color:@c transparent transparent transparent;
    border-style:dashed solid solid solid;
}
//左
.triangle(left,@w:10px,@c:#ccc){
    border-width:@w;
    border-color:transparent transparent transparent @c ;
    border-style:solid solid solid dashed ;
}
//右
.triangle(right,@w:10px,@c:#ccc){
    border-width:@w;
    border-color:transparent @c transparent transparent;
    border-style:solid dashed solid solid;
}
//一定执行:@_是固定格式，剩下两个参数也必须补全！
.triangle(@_,@w:5px;@c:#ccc){
    width:0;height:0;overflow: hidden;
}
//测试：传入不同的参数选用不同的样式
.sanjiao{
    .triangle(bottom,20px);
}

5.less的嵌套继承

在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。可减少嵌套层次，减少选择器匹配次数。应用非常方便！

.list{
    list-style-type: none;
    width:300px;margin:5px auto;
    padding:5px;background:#fff;
    li{
        height:30px;line-height: 30px;
        margin:2px auto;
        background: #ccc;
        &:hover{
            background:#eee;
        }

    }
    //将li中的a提出来，与父级平级！减少嵌套层数，减少匹配次数
    a{
        text-decoration: none;color:red;
        //&代表上一层选择器！
        &:hover{
            color:#fff;
        }

    }

    span{font-weight: bold;}
}

6.less的函数和运算：

//less源码：
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

//编译后的css源码：
#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

7.less的@argument

@argument包含了所有传递进来的参数，无需单独处理每一个参数。

//@arguments
//无需单独写入每一个参数，直接将@argument传入
.border_4(@width:5px,@c:#ccc){
    border:@arguments solid;
}
.text_box5{
    .border_4(5px,#c8c8c8);
}

8.”~“避免编译和!important：

//避免编译
.test_03{
    width:~'calc(300px-30px)';
}
//!important 为所有样式加上样式 调试,但尽量少使用
.text_box5{
    .border_radius() !important;
}

…..(此处偷懒很多字)

总结：渐渐不喜欢篇幅过长的博文了，喜欢短小精悍的，知识结构清晰，能利用零碎时间复习巩固，这次是之前学过的less–前端css预处理器，在繁杂的css编写中无疑是一大利器，也是非常推荐的课程。梳理的知识点虽简单，但已大致能满足大体的实践开发了。推荐博文：

前端构建：Less入了个门：http://www.cnblogs.com/fsjohnhuang/p/4187675.html