感觉自己都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树的层次结构,使代码更简洁,如下所示:

复制代码

{:;:;:;:;:;:;:;
            }{:;
    }{:;
    }{:;
    }

复制代码

 


四、操作

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的注释,使用”/*…*/”