码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-06-30 22:25:34      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:调用   编译器   toc   code   编译   render   函数   服务   images   

一、简介:

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

二、使用

  (1)客户端使用 

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

  (2)服务端使用

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

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

 1 //自动调用
 2 var less = require("less");
 3 less.render(".myClass {width : 1 +1; padding : 10}", function (err, css) {
 4    console.log(css)
 5 })
 6 
 7 //输出
 8 .myClass {
 9   width : 2;
10   padding : 10      
11 }
12 
13 //手动调用
14 var parser = require("less.Parser");
15 parser.parse(".myClass {width : 1+2}", function (err, tree) {
16   if(err) {
17      console.error(err); 
18    } else {
19      console.log(tree.toCss())
20    }
21 })

  (4)使用Koala编译器()

   技术分享

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

标签:调用   编译器   toc   code   编译   render   函数   服务   images   

原文地址:http://www.cnblogs.com/hughes5135/p/7100589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!