less的父元素和扩展

.box1 {
  width: 300px;
  height: 100px;
  background-color: chartreuse;
  .box2 {
    width: 100px;
    height: 100px;
    background-color: aqua;
    color: rgb(226, 55, 55);
  }
}

// 变量，在变量中可以存储一个任意的值
// 并且我们可以需要时，任意的修改变量中的值
@a: 100px;
@b: red;
@c:box4;

.box3{
  width: @a;
  height: @a;
}

// 作为类名，或者一部分值使用时必须以 @{ 变量名 } 的形式使用
@{c}{
  width: 100px;
  background-image: url("@{c}/1.png");
}

div{
  // 变量发生重名时，会优先使用比较近的变量
  @d:150px;
  width: @d;
  height:@e;
}
// 可以在变量声明前就是用变量
@e: color(#f000);


  .p1{
    width: 105px;
    height: 105px;
  }
// extend( ) 对当前选择器的样式（选择器分组）
  .p2:extend(.p1) {
      color: red; 
  }
.p3{
  // 直接对指定的样式引用，这里就相当于将p1的样式进行复制
  // mixin 混合
  .p1( );
}
// 使用类选择器可以在选择器后边加一个括号这是我们就创建了一个mixins
// 加上括号css中不显示/混合函数
.p4( ) {
  width: 130px;
  height: 130px;
  background-color: cadetblue;
}
.p5{
  .p4
}