对less的理解

我对less的理解：

less是写css时可以采用的另一种写法，用less的格式写出来的东西，可以通过编译器编译成css。也就是可以使用某种方法，把less文件变成css文件。编译成的css文件和平时自己写的css没什么区别，浏览器自动可读

好处

使用less而不是直接写css有几个好处：

1. less使用常量的形式保存一个值，哪里用到这个常量都行，这个常量的作用域应该是这个less文件吧？（这里的常量类似于js的变量，只是常量定义了之后不能动态修改值）。

2. 编译后可以是压缩后的css，这样就不用自己压缩啦。

3. 选择器嵌套写法。

   比如一个div内有几个其它DOM，css的写法是：
   div{display:block}
   div a{color:#fff}
   div input{border:0}
   
   而用less可以这样
   div{
       display:block
       a{color:#fff}
       input{border:0}
   }
   

4. 还有其它，我不自己写了，看这里http://www.cnblogs.com/hooray/archive/2011/12/02/2272212.html

如何使用

less有几种使用方法：

1. 部署前编译。据说这种方法是官方推荐的，就是你的less和你的html、js是没有关联的，html中直接引用编译好的css就行。一些ide支持自动检测less文件改动并自动编译的功能，webstorm和phpstorm就有。

2. 服务端编译。就是请求less的时候再编译。

3. 浏览器端编译。就是引用less文件之后，再引用less.js来编译less文件，编译好之后会生成style标签添加到head里。

   1. 这种方法据说官方最不推荐，

   2. 在编译完成之前，body的宽度会被设为0，我也不知道为什么，但实际就是这样。

   3. 可以使用外部设置的变量。

        在加载less.js前写
        <script>
          less = {
            globalVars: {
              var1: '"/string value"',
              var2: 'regular value'
            }
          };
        </script>

   4. 上面定义的变量有一个问题就是，如果你的变量是个字符串，而且第一个是/符号，必须像上面var1那样用单引号+双引号来包围字符串，否则less编译时会报错。