来认识下less css

lb20309

　　简介
　　感觉自己都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的主要特性做了个总结，对于"服务器端的使用”，"模式匹配”，“导入文件和变量”，“字符串插值”等一些深入的东西还需慢慢探讨，任重道远。