扩展在mixin中生成其名称的类

Question

这个问题适用于SASS和LESS。

我有一堆用mixins生成的类。 在我的SASS或LESS代码中，我想扩展这些类。 在LESS中，它不起作用抱怨没有这样的类（这些类出现在CSS中，但显然它们不在LESS代码中）。 我发现this feature request所以我猜LESS不支持它。 SASS怎么样？

示例（如果可以的话，我会切换到SASS）：

.errorLevels(@x){
  .level-@{x} {
    font-size: unit(8 + @x,px);
  }
}

.errorLevels(1);
.errorLevels(2);
.errorLevels(3);

.seriousError {
  &:extend(.level-1);
}

我期待：

.level-1 {
  font-size: 9px;
}
.level-2 {
  font-size: 10px;
}
.level-3 {
  font-size: 11px;
}

//this part is missing from output
.seriousError {
  font-size: 1px;
}

Answer 1

您可以执行以下操作来扩展在mixin中生成的类：

@mixin classGenerator {
    .error {
        color: red;
        font-size: 9px;
    }
}

@include classGenerator;

.seriousError {
    @extend .error;
    font-size: 20px;
}

修改

根据你问题的变化：

@mixin errorLevels($x){
  .level-#{$x} {
    font-size: #{12 + $x}px
  }
}

@include errorLevels(1);

.seriousError {
  @extend .level-1;
}