首页 > 代码库 > Css预处理器---Less(一)

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

2024-10-14 16:13:02   215人阅读

一、简介:

　　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(一)


联系
我们