CSS - 12 less入门

12. less

• less是一门css的预处理语言，通过less可以编写更少的代码实现更强大的样式

  由于less增添了许多对css的扩展，所以游览器无法直接执行less代码，执行前必须将less转换为css，然后由游览器执行

12.1 less注释

// `less`中的单行注释，注释中的内容不会被解析到`css`中

/*
`css`中的注释，内容会被解析到`css`文件中
*/

12.2 父子关系嵌套

body {
  height: 100px;
  width: 100px;
  div {
    height: 100px;
    width: 100px;
  }
  .box1 {
    background-color: #bfa;
    .box2 {
      background-color: red;
      >.box4{
        background-color: green;
      }
    }  
  }
}

12.3 变量

• 语法
  • 直接使用变量时，以@变量名的形式使用即可
  • 作为类名，属性名或一部分值使用时，必须以@{变量名}的形式使用

@b1:box1;
@size:200px;
@color:red;
@bc:background-color;
@bi:background-image;
@path:image/a/b/c;

.@{b1}{
  width: @size;
  height: $width;
  @{bc}: @color;
  @{bi}: url("@{path}/1.png");
}

12.4 混合函数

//在函数形参处可设置默认值
.test(@w:200px, @h:100px, @bc:red){
  width: @w;
  height: @h;
  background-color: @bc;
}

.p6{
  // .test(200px, 100px, red); // 对应参数位传值，常规
  // .test(@h:200px,@w:100px,@bc:red); // 写明对应属性，可不按照顺序传参
  // .test(); //完全使用默认参数
  .test(300px); //部分使用默认参数
}

12.5 其它

• & 拼接符，代表当前选择器的名字

  :extend() 继承括号内的选择器指定的样式

  .p1() 直接对指定的样式进行引用，相当于将p1的样式进行了赋值

.p1{
  width: @size;
  height: $width;
  //相当于.p1-wrapper
  &-wrapper{
    background-color: peru;
  }
}
.p2:extend(.p1){
  color:@color;
}
.p3{
  .p1();
}