less要注意的事项

less的优点：

1：可以防止命名冲突

2：可以简代码

首先要使用less需要：1、引入less文件编译之后转换的css文:2、如果是客户端的话可以引入less.js进行编译。如果是 服务器端的话用node.js将less进行编译，编译成css文件，然 后进行编译

介绍less注意事项：

1：可以使用变量进行编译

@yanse:blue;

body{

backround:@yanse    //-------->background:blue;

}

2:选择器和属性名的变量

@{变量名}

如:

@yanse:color;

.@{yanse}{@{yanse}:#f0f;}   //------------>.yanse{color:#f0f;}

3：url的变量

@imgurl:"****/image/";

body{background:url("@{imgurl}1111.jpg") no-repeat;}

4：定义多个变量

@var:0;

.class{

@var:1;

.clsaa1{

@var:2;

concent:@var;//值为3相当于将@var赋值给concent；然后确定@var的值为3；即concent的值为3

@var：3

}

one:@var  //--->值为1

}

5：延迟加载（前边使用了此变量，但是没有定义，可以在后面定义出来，不影响输出结果）

@color:#000;

div{

font-size:@fontSize;

color:@color;

}

@fontSize:20px;

【混合使用】

1：基本混合

.demo{

color:#000;

}

div{

border:1px solid #000;

.demo;     //-------->color:#000;

}

2、类名后面使用（）；（原来模板不出现）

@pink:pink;

.aaa(){

color:#000;

background:@pink

}

div{.aaa;   //------>color:#000;background:#ffc0cb;}