Css预处理器---Less(一)

一、简介:

　　Less是一种动态样式语言,可以在样式中使用变量，继承，运算，函数

二、使用

　　(1)客户端使用　

//引入您的.less样式文件，rel属性区别去css为stylesheet/less
<link rel="stylesheet/less" type="text/css" href="style.less">
//引入less.js
<script src="less.js" type="text/javascript"></script>

　　(2)服务端使用

//使用npm安装less
$ npm install -g less
//或最新版本
$ npm install -g less@latest
//命令行使用lessc编译
$ lessc index.less > index.css

　　(3)在node项目中调用less编译器

//自动调用
var less = require("less");
less.render(".myClass {width : 1 +1; padding : 10}", function (err, css) {
   console.log(css)
})

//输出
.myClass {
  width : 2;
  padding : 10      
}

//手动调用
var parser = require("less.Parser");
parser.parse(".myClass {width : 1+2}", function (err, tree) {
  if(err) {
     console.error(err); 
   } else {
     console.log(tree.toCss())
   }
})

　　(4)使用Koala编译器()