[前端]less的使用及和css的相互转换

关于less请看官方文档：http://www.1024i.com/demo/less/
一 基本用途
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

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

语言特性快速预览：

变量：

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

LESS源码：

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}
编译后的CSS：

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
混合（Mixins）

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

LESS源码：

.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
编译后的CSS：

#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

LESS源码：

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px
}
}
}
}
编译后的CSS：

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
函数和运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

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;
}
二 使用
1，nodejs转换
Node.js库

LESSCSS官方有一款基于Node.js的库，用于编译.less文件。

使用时，首先全局安装less（部分系统下可能需要在前面加上sudo切换为超级管理员权限）：

npm install -g less
接下来就可以使用lessc来编译.less文件了：

lessc example/example.less example/example.css
2，浏览器解析
LESSCSS也可以不经编译，直接在浏览器端使用。

使用方法：

下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。
在页面中引入.less文件

需要注意rel属性的值是stylesheet/less，而不是stylesheet。

引入第1步下载的.js文件

需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。
关于浏览器解析会存在很多意想不到的坑,所以一般是将其转换成css文件
三 nodejs自动转换
简化指令参数:
1. 使用node.js的path包拼接文件路径:

Js代码 收藏代码

//js file path is ${project}/bin/less2.js  
var path = require('path');  
  
var public_dir = path.join(__dirname, "..", "public");  
var less_dir = path.join(public_dir, "less", "base.less");  
var css_dir = path.join(public_dir, "css", "base.css");  

2. 使用exec模块调用shell

Js代码 收藏代码

var exec = require('child_process').exec;  
  
function compile_less(input_file, output_file) {  
    var cmd = ['lessc ', input_file, ' > ', output_file].join('');  
    exec(cmd, {encoding: 'utf-8'},   
        function(error, stdout, stderr) {  
            if(error !== null) {  
                console.log(error);  
                return;  
            }  
            console.log(stdout);  
        });  
}  
  
console.log('compile ' + less_dir + ' once...');  
compile_less(less_dir, css_dir);  

3. 监视文件改动

Js代码 收藏代码

var   
fs = require('fs');  
  
console.log('watching file ...');  
fs.watchFile(less_dir, {   
        persistent: true,   
        interval: 1000 // 1 sec  
    },   
    function(curr, prev) {  
        console.log('the file changed, compile ...');  
        compile_less(less_dir, css_dir);  
    });  

*并没有亲自实践