less 记录

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

1安装

npm install -g less

新建less文件

@width: 10px;
.box {
    width: @width;
    height: @width * 2;
}

 

2编译成css

执行命令

lessc theme.less theme.css

执行命令后生成 未压缩 theme.css文件

.box {
  width: 10px;
  height: 20px;
}

 

lessc 参数

lessc -h

--no-color   Disables colorized output.
--ie-compat   Enables IE8 compatibility checks.
--js    Enables inline JavaScript in less files

 

3插件

安装

npm install -g less-plugin-clean-css

执行命令

lessc theme.less theme.css --clean-css

生成 压缩的 theme.css

.box{width:10px;height:20px}

 

命令选项

--clean-css=advanced

--clean-css=rebase

暂时不知什么区别

 

4使用nodejs 

var less = require('less');
var fs = require('fs');
var LessPluginCleanCSS = require('less-plugin-clean-css');


// 用法1 -未压缩
fs.readFile('theme.less', function(err, res) {
    if(err) {
        console.log(err);
    } else {
        console.log(res.toString());
        // 转为css
        less.render(res.toString(), function (error, output) {
            if(error) {
                console.log(err);
            } else {
                fs.writeFileSync('theme.css', output.css);
            }
        });
    }
});


// 用法2 压缩的
fs.readFile('theme.less', function(err, res) {
    if(err) {
        console.log(err);
    } else {
        console.log(res.toString());
        // 转为css
        less
            .render(res.toString(), { 
                javascriptEnabled: true, 
                plugins: [new LessPluginCleanCSS({advanced: true})]
            })
            .then(output => {
                fs.writeFileSync('theme.min.css', output.css);
            })
            .catch(error => {
                console.log(error);
            });
    }
});