less使用十一

.box1 {
  color: #bfc;
}
.box1 .box2 {
  color: pink;
  margin-top: 30px;
}
.box1 .box2 .box3 {
  width: 100px;
  height: 100px;
  background-color: #bfc;
}
.box1:hover {
  color: red;
}
.p1,
.p2 {
  width: 100px;
  height: 100ox;
}
.p2 {
  background-color: #f00;
}
.a2 {
  width: 200px;
  height: 300px;
  background-color: #00a;
}
/*# sourceMappingURL=./style.css.map */

• less是一个css的增强版；是一门css的预处理语言，less增加了很多新特性，增加了很多对css的扩展，浏览器执行时，需将less转化为css来执行；
• css也支持设置变量：–变量名:变量值；使用的时候之间var(–变量名)；但是兼容性不好；
• css的计算clac()计算函数，兼容性不好；
• /* */:这个多行注释会解析到css中，//单行注释不会解析到css中；
• 变量：@变量名:变量值；，使用变量的时候，如果作为值来使用的时候：@变量名；如果作为类名来使用或者是一部分值使用的时候必须：@{变量名}；
• 声明同一个变量名时，less会就近原则使用；如果高度想使用宽度的值时$想使用的属性；
• &表示外层选择器；
• :extend()：对当前选择器扩展指定选择器的样式；
• 使用类选择器时可以在选择器后面加一个括号，这时就实际就是创建了一个mixins（混合函数），就可以在想用的地方直接写:.类();就复制了里面的样式；
• 混合函数：在混合函数中，可以直接在里面设置变量，在括号里面传参数：.类名(参数，参数……)；可以按顺序传，也可以将；参数:参数值，这样进行传；
• less中有自己定义好的混合函数；
• @import “路径”，引入其他less文件；