【CSS】less 学习小结

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）

计划、执行、每天高效的活着学着