less的嵌套规则对于有效组织你的css代码有较好的作用。其中使用mixin或者class都可以作为被嵌套的实体,但是二者还是有区别的:

  • mixin必须由.name+(){}的pattern来定义,而class则只需.name{}来定义(注意:class依然可以通过.name直接在less源文件中引入该class的所有rule)
  • mixin本身并不会在最终编译输出的css文件中以类出现,而class最终会以.name{}输出该class
.class-1{
property-1: a;
}
.class-2{
.class-1;
property-2: b;
}

上面的less代码最终将输出以下的css代码:

.class-1 {
property-1: a;
}
.class-2 {
property-1: a;
property-2: b;
}

再来看看下面的less代码:

.class-1-mixin(){
property-1: a;
}
.class-2{
.class-1-mixin();
property-2: b;
}

上面这段代码由于.class-1-mixin只是一个mixin,被调用编译后并不输出.class-1-mixin这个class!!!

.class-2 {
property-1: a;
property-2: b;
}

 

相关文章:

  • 2021-08-04
  • 2022-12-23
  • 2021-06-28
  • 2021-08-29
  • 2022-12-23
  • 2021-09-20
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-30
  • 2022-02-15
  • 2022-12-23
相关资源
相似解决方案