less的学习

1. CSS作为一门标记性语言，语法简单，学习难度低
   但CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，，造成这些困难的很大原因源于CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
2. LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
   LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。less它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，，
3. Less 可以运行在 Node 或浏览器端。

1. 方式1 在客户端运行less转换程序，了解
   在html中引入xx.less,同时再引入less.js,就是一个可以运行在客户端浏览器中的less编译程序 -- 效率偏低，不推荐使用
2. 方式2 在服务端运行less转换程序-推荐
   1） 下载并安装一款服务器端的js解释器-nodejs
   2） 下载less文件的转换程序lessc --js脚本
3. 在服务器端js解释器运行lessc转换器，把自己编写的.less文件转换为css文件
   a) 可以在命令行中使用转换程序
   node.exe lessc my.less my.css
   b) 在hbuilder中使用转换程序
4. html文件中，引用编译得到的css文件

一、变量
1、使用@声明和使用变量：

@mycolor:#4393c;
p{
color:@mycolor;
}
生成css:
p{color:#4393c;}

2、变量的嵌套

eg：@fi："123";
@var:'fi';
content:@@var;//123

3、传参数

.border_style(@w:5px, @c:red, @ss:solid) {//设置参数默认值
   border: @arguments;
}
//调用
.border_style(40px);//border 40px red solid;

二、注释；
编译之后只保留多行注释
三、混合

@box_width : 200px;//定义变量
.box {
   //.border_style;/.border_style();不传参时使用默认值
   .border_style(20px);//相当于调用border_style样式
   width: @box_width;
   height: @box_width;
   background-color: yellow;
}
.border_style(@border_width:5px) {//设置参数默认值
   border: solid @border_width green;//实际用到css中的border样式
}