// 定义属性值变量，定义变量的时候必须以分号结束，否则找不到该变量@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)  }}