1. less 使用
less 可直接使用浏览器解析 or 使用node 的grunt/gulp 解析成传统css 。
推荐开发环境直接使用less 文件调试， 生产环境部署解析好的css
2. less 在浏览器中的使用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <link rel="stylesheet/less" type="text/css" href="example.less" /> 6 <script src="less.min.js" type="text/javascript"></script> 7 </head> 8 <body> 9 <div class="box"> 10 啊啊c 11 <div>呵呵</div> 12 </div> 13 </body> 14 </html>
注意点：
1）一定要在less文件之后引入 less.js
2）可在引入less.js 文件之间定义less 变量，修改默认参数，例如
1 <!-- set options before less.js script -->
2 <script>
3 less = {
4 env: "development",
5 logLevel: 2,
6 async: false,
7 fileAsync: false,
8 poll: 1000,
9 functions: {},
10 dumpLineNumbers: "comments",
11 relativeUrls: false,
12 globalVars: {
13 var1: ‘"string value"‘,
14 var2: ‘regular value‘
15 },
16 rootpath: ":/a.com/"
17 };
18 </script>
19 <script src="less.js"></script>
3. 使用grunt 解析
1 module.exports = function (grunt) {
2 grunt.initConfig({
3 less: {
4 development: {
5 options: {
6 compress: false,
7 yuicompress: false
8 },
9 files: {
10 "dest/example.css": "src/example.less"
11 }
12 },
13 production: {
14 options: {
15 modifyVars: {
16 imagepath_page: ‘"/misc/images/"‘,
17 imagepath: ‘"/misc/images/"‘
18 },
19 compress: true,
20 yuicompress: true,
21 optimization: 2
22 },
23 files: {
24 "dest/example.css": "src/example.less"
25 }
26 }
27 },
28 });
29
30 grunt.loadNpmTasks(‘grunt-contrib-less‘);
31 grunt.registerTask(‘default‘, [‘less‘]);
32 }
注意点：
1）开发环境可以仅使用development 的参数 ， 生产环境使用production的参数，当两者都存在时，将采用后者的参数，上文例子采用production的参数
2）
时间： 2024-08-10 19:19:08