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编译器()