正确使用less以及less变量variables

初见less
以//开始的注释不会被编译到css文件中
以/**/包裹的注释会被编译在css文件中

正确使用less

一、如何使用less
less文件只有在被编译后才能被浏览器识别使用

二、less编译工具
1、koala 国人开发的全平台的less编译工具 网址：http://koala-app.com/
2、winless windows下的less编译软件 网址：http://winless.org
3、codekit Mac平台下的less编译软件 网址：http://incident57.com/codekit/index.html

三、客户端调试方式
首先引用.less文件 注意引用时使用link引入，然后将rel属性设置为rel=“stylesheet/less”
然后引用less.js 注意：引入普通js引入方式一致，但是一定要放置在less样式文件之后

四、变量variables
（一）普通变量
1、变量的定义方式@
2、less编写：
@blue:#f00;
#header{
color:@blue
}
编译结果：
#header{
color:#f00
}
3、注意：由于前两只能定义一次，实际上他们就是“常量”
（二）、作为选择器和属性名的变量
1、使用时将变量以@{变量名}的方式使用
2、less编写
@mySelector:width;
.@{mySelector} {
@{mySelector}:960px;
height:500px;
}
编译结果：
.width{
width:960px;
height:500px;
}
（三）作为URL的变量
1、使用时，使用"“将变量的值括起来，使用时同样将变量以@{变量名}的方式使用
2、less编写
@imgUrl:“https://www.baidu.com/img/”;
body{background:#00f url(”@{imgUrl}/bdlogo.png") no-repeat}
编译结果： body{background:#00f url(http://www.baidu.com/img//bdlogo.png") no-repeat}

（四）延迟加载
1、延迟加载：变量是延迟加载的，在使用前不一定要预先声明 也就是说变量可以先使用再定义 不影响效果
2、less编写：
.lazy-eval{width:@var}
@var:@a;
@a:9%
编译结果：.lazy-eval-scope{width:9%}

（五）定义多个相同名称的变量时
1、在定义一个变量两次是，只会使用最后定义的变量，less会从当前作用域中向上搜索，这个行为类似于css的定义中始终使用最后定义的属性值。
2、less编写
@var:0;
class{
@var:1;
.brass{
@var:2;
three:@var;
@var:3;
}
one:@var;
}
编译结果：
.class{one:1}
.class .brass{ three:3 }