来认识下less css

简介

感觉自己都out了，跟不上web时代的潮流了，前不久才刚接触这玩意，发觉lesscss在某些方面还挺有用的，说白了这东西就是一种动态的样式语言，语法类似于css，可以像java那样进行编译，生成你想要的对应css，并且less css扩展了css的动态行为。如，它可以设置变量（variables）、支持混合书写模式（mixins）、支持嵌套规则（nested rules）、也可像js那样进行属性值的操作（operations）、像js函数那样传递参数（functions）、 也具有变量的作用域（scope）等。

运行环境

lesscss可以在客户端，也可称浏览器端（IE+、Webkit、Firefox）、服务器端（node.js ）上运行。

客户端只需引入相关文件即可：如下所示

<link rel="stylesheet/less" type="text/css" href="less/demo.less">
<script src="js/less.js" type="text/javascript"></script>

其中less文件是你自己编写的less文件，强烈推荐使用sublime text3编辑器进行编辑，高亮的语法以及强大的插件支持不得不让人爱不释手，下载地址：sublimetext3官网

less可到官网上下载，当前吧版本是1.4.2：less官网，还要注意这两个文件的引入顺序。

服务器端是通过nodejs的npm管理包来对less进行安装和编译的，具体nodejs这东西怎么用，最近也在探索中，没linux环境，只好在win7环境下装个unix模拟器cygwin来安装nodejs了。又有得搞了，开始node吧。

特性以及使用

一、变量

less中的变量主要用于定义一些通用的样式，变量还具有计算的功能，还可以定义一个变量名为变量，变量只能定义一次，并且会发生覆盖的现象，如下所示：

@color: #ccc; // 定义变量
.demo { // 应用到元素中
    color: @color;
}

// 变量计算功能
@color: #ccc;
@light-color: @color + #111;
.demo {
    color: @light-color;
}

// 定义一个变量名为变量
@color: #ccc;
@highlight: "color";
.demo {
    color: @@highlight;
}

// 在less中的变量实际上就是一个“常量”，因为它们只能被定义一次
@color: #ccc;
@highlight: "color";
@color: #333; // 后面的@color覆盖前面的@color，所以color输出为#333
.demo {
    color: @@highlight;
}

具体经编译后生成的css是咋样的，在这就不列出了，不然的话会搞得一大沓东西，有兴趣的童鞋可以自己动手测试下。

二、混合模式

说白了，less的混合模式就是把一个class类作为变量引入到另一个class类中，还可以带参数调用，如下所示：

// 定义一个类
.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
// 定义的类应用到另一个类中
#header {
    .rounded-corners; //使用默认参数5px
}
#footer {
    .rounded-corners(10px);//把10px传递给变量@radius
}

// 混合还有一个重要的变量：@arguments，该参数表示引用所以的参数变量
.boxShadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
#header {
    .boxShadow(2px, 2px, 3px, #f36);
}

注：上面的这些less例子是来自官网的，只是自己把它整理了一下。

三、嵌套规则

less中的嵌套就是在一个选择器中嵌套另一个选择器来实现继承，类似于DOM树的层次结构，使代码更简洁，如下所示：

#header {
    display: block;
    h1 {
        font-size: 26px;
        font-weight: bold;
        a {
            text-decoration: none;
            color: #f36;
            //注意"&"的用法：嵌套中有"&"时解析的是同一个元素或此元素的伪类，没有"&"时解析的是后代元素
            &:hover { 
                text-decoration: underline;
                color: #63f;
            }
        }
    }
    p {
        font-size: 12px;
    }
}
// "&"的用法：
#header {
    &.fl {
        float: left;
    }
    .ml5 {
        margin-left: 5px;
    }
}
/*编译生成的css
#header.fl {float: left;}
#header .ml5 {margin-left: 5px;}
*/

四、操作

less也具有操作功能，可针对任何数字、颜色、变量的操作，可以对其进行加、减、、乘、除或者更复杂的综合运算。如下所示：

@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
    color: @base-color * 3;
    border: 1px solid desaturate(@red, 100%);
    border-width: @the-border @the-border*2 @the-border*3 @the-border;
    border-color: desaturate(@red, 100%) @red lighten(@red, 10%) darken(@red, 30%);
}
/*编译后生成的css
#header {
    color: #333;
    border: 1px solid #4a4a4a;
    border-width: 1px 2px 3px 1px;
    border-color: #4A4A4A #842210 #B12E16 #000000;
}
*/

@base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header {
    color: #888 / 4;
    height: 100% / 2 + @filler;
}
/*编译后生成的css
#header {
    color: #222222;
    height: 60%;
}
*/

// 不同单位的操作
@var: 1px + 5;  //Less最终解析的值是“6px”
@size: 20px;
#header {
    border: @var solid red;
    width: @var + 50 * 2;
    height: (@var + 5) * 4;
}
/*编译生成的css
#header {
    border: 6px solid red;
    height: 120px;
    width: 100px;
}
*/

五、函数

less的function功能主要是针对Color funtions，Less提供了多种变换颜色的功能，如下所示：

@base: #f04615;
#header {
    color: @base;
    background-color: fadein(@base, 10%);
    h1 {
        color: lighten(@base,20%);
        background-color: lighten(fadeout(@base,20%),5%);
        a {
            color: darken(@base,50%);
            background-color: spin(@base,10);
            &:hover {
                color: saturate(@base,30%);
                background-color: fadein(spin(@base,-5),20%);
            }
        }
    }
    p {
        color: desaturate(@base,60%);
    }
}
/*编译后生成的css
#header {
    background-color: #F04615;
    color: #F04615;
}
#header h1 {
    background-color: rgba(242, 89, 45, 0.8);
    color: #F69275;
}
#header h1 a {
    background-color: #F06B15;
    color: #060200;
}
#header h1 a:hover {
    background-color: #F03415;
    color: #FF3E06;
}
#header p {
    color: #A56F60;
}
*/

六、命名空间

less的命名空间类似于js的命名空间，把一些变量或mixins组织起来，并将其封装，用的时候再提取出来，如下所示：

// bundle库
#bundle {
    .button() {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover {background-color: white;}
    }
    .tab {
        //...
    }
    .citation {
        //...
    }
}
// 比如操作header中的a样式（和button类样式一样）
#header a {
    color: orange;
    #bundle > .button;
}

七、变量作用域(范围)

less中的变量也具有作用域，类似于js中的变量作用域环境，如下所示：

@var: red;
#page {
    @var: white;
    #header {
        color: @var; // white
    }
}
#footer {
    color: @var; // red
}

另外关于less的注释方式：

1、单行注释类似于js的注释，使用"//"分隔符

2、多行注释类似于css的注释，使用"/*...*/"

结语

以上只是对less的主要特性做了个总结，对于"服务器端的使用”，"模式匹配”，“导入文件和变量”，“字符串插值”等一些深入的东西还需慢慢探讨，任重道远。