Less知识总结

一、混合：

什么是less中的混合(Mixin)？将需要重复使用的代码封装到一个类中，在需要使用的地方调用封装好的类即可，在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来，本质就是ctrl+c --> ctrl + v。

less中混合的注意点：如果混合名称的后面没有()，那么在预处理的时候会保留混合的代码（意思是在输出的css中，会含有.center这部分代码），如果混合名称的后面加上()，那么在预处理的时候不会保留混合的代码，（意思是在输出的css中，不会含有.center这部分代码，但是调用它的其他类还是复制这部分代码过来了）。

.center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.center(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

1、带参数混合：

在LESS中，你还可以像函数一样定义一个带参数的属性集合。

.whc(@w, @h, @c){
   @w;
  height: @h;
  background: @c;
}

2、带参数的混合, 并且带默认值：

.whc(@w:100px, @h:100px, @c:pink){
   @w;
  height: @h;
  background: @c;
}
.box1{
  // 200px;
  //height: 200px;
  //background: red;
  //.whc(200px, 200px, red);

  // 这里是给混合的指定形参传递数据
  .whc(@c:red);
}
.box2{
  // 300px;
  //height: 300px;
  //background: blue;
  .whc(300px, 300px, blue);
}

赋值通过冒号赋值，参数也是，不是等于号；

即使混合有三个参数，你可以只传一个，且可以指定给哪一个形参传值。

3、命名参数：

调用混合时在参数前面加上它自己的参数名（形参名）中间用逗号(，)隔开，如：

.center(@s,@c,@w){
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-style:@s ;
    border-color:@c ;
    border-@w ;
}

.center(@c:black,@s:solid,@w:10px)

4、匹配模式：

就是通过混合的第一个字符串形参，来确定具体要执行哪一个同名混合。

通用的匹配模式

无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码。

@_：表示通用的匹配模式

.triangle(@_, @width, @color) {
   0;
  height: 0;
  border-style: solid;
}
.triangle(Bottom, @width, @color) {
  border- @width;
  border-color: @color transparent transparent transparent;
}
.triangle(Left, @width, @color) {
  border- @width;
  border-color: transparent @color transparent transparent;
}
.triangle(Top, @width, @color) {
  border- @width;
  border-color: transparent transparent @color transparent;
}
.triangle(Right, @width, @color) {
  border- @width;
  border-color: transparent transparent transparent @color;
}

.box {
    .triangle(Top, 50px, skyblue);
}

5、arguments：

捕捉用户所有传入的参数，然后拼接，同JavaScript中函数的arguments。

.box-shadow(@x: 0, @y: 0, @height: 3px, @ 3px) {
    -webkit-box-shadow: @arguments;
       -moz-box-shadow: @arguments;
            box-shadow: @arguments;
}
.myclass {
    .box-shadow(2px, 2px);
}

编译后：

.myclass {
  -webkit-box-shadow: 2px 2px 3px 3px;
  -moz-box-shadow: 2px 2px 3px 3px;
  box-shadow: 2px 2px 3px 3px;
}

二、继承：

特点：

less继承方便代码模块化

继承不支持带参数

语法：获得继承名：extend（继承部分名）{…}

.base{
     auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.header:extend(.base){
  /*header自身代码*/
  padding: 0 auto;
}

编译后：

.base,
.header {
   auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.header {
  /*header自身代码*/
  padding: 0 auto;
}

继承所有状态（如伪类选择器）

语法：获得继承名：extend（继承部分名 all）{…}

.base{
     auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.base:hover{
  background: red;
}

/*没有加all*/
.header:extend(.base){}
/*加入all*/
.footer:extend(.base all){};

编译后：

.base,
.header,
.footer {
   auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.base:hover,
.footer:hover {
  background: red;
}
/*没有加all*/
/*加入all*/

三、避免编译：

有时候需要输出一些不正确的CSS愈发或者使用一些LESS不认识的专有语法。

要在输出这样的值，我们可以在字符串前加上一个～

.box {
   ~"calc(300px - 30px)";
}

编译后：

.box {
   calc(300px - 30px);
}

important提升优先级

.mixin() {
    color: #900;
    background: #F7BE81;
}
h2 {
    .mixin() !important;
}

编译后：

h2 {
  color: #900 !important;
  background: #F7BE81 !important;
}