less使用

less的特点：

• 大体上语法同css，但是支持变量，嵌套等特殊用法，使用起来也更方便。
• less不能直接运行在浏览器上，得通过转换为css代码，采用用于浏览器

less语法：

选择器：

• .box1{
      width: 100px;
      height: 100px;
      background-color: aqua;
      .box2{
          background-color: #bfa;
          .box3{
              background-color: blue;
          }
      }
      .box4{
          background-color: blueviolet;
      }
  }

• 父元素可以包含后代元素

变量：

• @a:100px;
  @b:red;
  @c:box1;
  
  .@{c}{
      width: @a;
      height: $width;
      background-color: @b;
  }

• 变量语法：@变量名：变量值，，，变量名自己设置，变量值可以是属性值，属性名，块名

• 属性值使用时，直接使用@变量名；其他变量使用时，需要@{属性名}。

父元素：

.box5{ &:hover{ background-color: #bfa; } &-info{ background-color: red; } }

.box5:hover { background-color: #bfa; } .box5-info { background-color: red; }

• 通过&可以获得括号外的元素名，然后css代码生成时用获得的元素名替换&符号

继承拓展：

.box6{
    width: 100px;
    height: 100px;
}
.box7:extend(.box6){
    background-color: #bfa;
}

.box7会得到.box6的高度和宽度值。

混合函数mixin:

.box8(){
    background-color: red;
}
.box9{
    .box6();
    .box8()
}

.box8不会出现在css代码中，但是.box9取可以在css代码里得到.box8的背景属性，使用时，括号可以省略。

混合函数更多用法：

.box10(@w,@h,@color){
    width: @w;
    height: @h;
    background-color: @color;
}

.box11{
    .box10(100px,100px,red);
    .box10(@color:red,@w:100px,@h:100px);
}

运算：

.box12{
    width: 100px + 100px;
    height: 100px *2;
}

属性值可以直接参与运算，得到结果，而不用去计算。

导入：

@import "this-is-valid.less";导入其他的less文件。