2.21学习经验分享#
Bruce_Zhu于2017.2.21
一、LESS基础
LESS 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。并且LESS 可以运行在 Node 或浏览器端。
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
二、 LESS编译方法
方式1 在客户端运行LESS转换程序，了解在html中引入xx.less,同时再引入less.js,就是一个可以运行在客户端浏览器中的LESS编译程序 -- 效率偏低，不推荐使用。
-
方式2 在服务端运行LESS转换程序
1） 下载并安装一款服务器端的js解释器-nodejs
2） 下载LESS文件的转换程序lessc --js脚本
3） 在服务器端js解释器运行lessc转换器，把自己编写的.less文件转换为css文件
a) 可以在命令行中使用转换程序 C:\Users\Administrator>node.exe lessc my.less my.css b) 在HBuilder中使用转换程序4）在 HTML文件中，引用编译得到的css文件
-
方式3 使用Sublime Text来转换LESS文件
1） 打开Sublime Text，然后用Ctrl + Shift + P调出插件控制台，搜索LESS2CSS插件并下载。
2） 安装好后，当你写好LESS文件后按Ctrl + S即可在当前LESS文件目录下自动编译好.CSS文件（前提是要安装好Nodejs）
三. LESS语法学习
LESS完全支持CSS语法
LESS支持单行注释和多行注释，但只有多行注释会被转换到CSS文件中
-
LESS支持变量(variable)
@变量名：值
使用：选择器 {样式：@变量名}
-
LESS支持样式混合-在一个样式中引用另一个样式
.class1(){...} .class2{.. ... .class1 ... } -
带参混合
.class()(@参数1，@参数2，。。。){....} .class2 { ... .class(参数1，参数2); ... } } -
嵌套规则
.class1{ ... .class2 { } } 转换的结果 .class1{ } .class1 .class2{ }
