Less基础资料

　　LESS是一个CSS预处理器，CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

• Less安装

• 打开sublime：按键ctrl + shift + p，输入：Less2Css，点击后即可安装

• windows下，Less2CSS对lessc.cmd有依赖，请下载：https://github.com/duncansmart/less.js-windows/releases后并将其路径（ E:/Less）添加至系统环境变量中

• 重启系统，新建一个文件：test.less编写代码，ctrl+s后你能看到在你目录下自动生成了test.css

• 注：默认在xx.less文件的同级目录下生成 xx.css，且自动压缩

• 

• Less语言特性

• 变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用；所以调整全局样式的时候我们只需要修改几行代码就可以

• 

• 混合（Mixins）：混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样

  • 混合用法

  • 

  • 带参数混合

  • 

• 嵌套：我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰

• 

• 函数和运算：  运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值

• 

• 作用域：跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止

• 

• 注释：与JS雷同

• 

• 避免编译：有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法，要输出这样的值我们可以在字符串前加上一个 ~

•