您的位置：首页 > Web前端 > CSS

【CSS】less 学习小结

2015-07-14 09:32 741 查看

1. less 使用

less 可直接使用浏览器解析 or 使用node 的grunt/gulp 解析成传统css 。

推荐开发环境直接使用less 文件调试，生产环境部署解析好的css

2. less 在浏览器中的使用

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet/less" type="text/css" href="example.less" />
<script src="less.min.js" type="text/javascript"></script>
</head>
<body>
<div class="box">
啊啊c
<div>呵呵</div>
</div>
</body>
</html>

注意点：

1）一定要在less文件之后引入 less.js

2）可在引入less.js 文件之间定义less 变量，修改默认参数，例如

<!-- set options before less.js script -->
<script>
less = {
env: "development",
logLevel: 2,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
globalVars: {
var1: '"string value"',
var2: 'regular value'
},
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>

3. 使用grunt 解析

module.exports = function (grunt) {
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: false
},
files: {
"dest/example.css": "src/example.less"
}
},
production: {
options: {
modifyVars: {
imagepath_page: '"/misc/images/"',
imagepath: '"/misc/images/"'
},
compress: true,
yuicompress: true,
optimization: 2
},
files: {
"dest/example.css": "src/example.less"
}
}
},
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', ['less']);
}

注意点：

1）开发环境可以仅使用development 的参数，生产环境使用production的参数，当两者都存在时，将采用后者的参数，上文例子采用production的参数

2）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航