less的基本语法

// 定义属性值变量，定义变量的时候必须以分号结束，否则找不到该变量
@color:pink;
.myDiv {
  color: @color;
}
复制代码

// 定义属性名的变量
@m:margin;
.myDiv {
  @{m}: 10px;
}
​
// 定义标签选择器的变量
@selector:warp;
#@{selector} {
  @{m}: 10px;
}
​
.@{selector} {
  @{m}: 10px;
}
复制代码

// 变量的延迟加载
@var: 0;
.class {
  @var: 1;
    .brass {
      @var: 2;
      // 如果是顺序执行的，那么此时 size 的值应该是2
      // 但是在less中存在变量的延迟加载，变量的赋值会等作用域中所有的数据加载完毕才会赋值
      // 所以此时这个值就是 3
      size: @var; // 3
      @var: 3;
    }
  size: @var;
}
复制代码

// less中的嵌套规则
.myDiv {
  margin: 10px;
  background-color: pink;
  // 基本嵌套，直接在一个标签选择器中嵌套一个新的标签选择器即可
  .myDiv2 {
    margin: 20px;
    background-color: yellow;
    // 不进行嵌套，同级使用，需要使用 & 符号，代表和的意思
    &:hover{
      background-color: aqua;
    }
  }
}
复制代码

// less混合的基本使用
// 当两个HTML元素中存在多个一致的元素的时候
// 此时就可以定义一个样式规则提供给他们两个使用
// 此时这个混合会被编译到css文件中
.guize {
  background-color: pink;
  font-size: 10px;
  margin: 10px;
}
​
#myDiv {
  .divOne {
    .guize;
  }
  .divTwo {
    .guize;
  }
}
复制代码

// 给混合加上小括号之后，这个混合就不会被编译到css文件中
.guize() {
  background-color: pink;
  font-size: 10px;
  margin: 10px;
}
​
#myDiv {
  .divOne {
    .guize();
  }
  .divTwo {
    .guize();
  }
}
复制代码

// less可以动态的传递参数
.guize(@w,@h,@c) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
    .guize(10px,10px,pink)
  }
  .divTwo {
    .guize(20px,20px,yellow)
  }
}
​
复制代码

// less可以动态的传递参数
.guize(@w:10px,@h:10px,@c:pink) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
     // 上边给了默认值这里不给值会使用默认值
    .guize()
  }
  .divTwo {
    // 如果给定了新的实参值，那么会覆盖默认的
    .guize(20px,20px,yellow)
  }
}
复制代码

// less可以动态的传递参数
.guize(@w:10px,@h:10px,@c:pink) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
     // 上边给了默认值这里不给值会使用默认值
    .guize()
  }
  .divTwo {
    // 如果这里的实参只给定一个，那么他会按照顺序进行赋值，也就是把yellow赋值给@w变量
    // 但是我们想把这个颜色赋值给最后的 @c , 所以我们此时使用命名参数
    // 使用命名参数指定将 yellow 赋值给哪个变量
    .guize(@c:yellow)
  }
}