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

这个问题适用于SASS和LESS

我有一堆用mixin生成的类。 在SASS或更少的代码中，我希望扩展这些类。 在LESS中，抱怨不存在这样的类是行不通的（类显示在CSS中，但显然它们不是在LESS代码中）。 我发现，所以我想LESS不支持它。 SASS怎么样

示例（较少，但如果可以，我将切换到SASS）：

我期望：

.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;
}

---

可以执行以下操作来扩展在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;
}

---

可以执行以下操作来扩展在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;
}

---

你试过什么吗？哦，是的：）代码太大，无法复制/粘贴到这里，但我提供的链接的描述和代码示例较短。如果它只是一个属性（即

font size

），那么你可以使用mixin而不是

extend

。自v1.6.0以来，较少支持使用动态生成的类作为混入。这看起来不像Sass。你说得对。它比较少，但如果可以达到效果，我会改为SASS。你尝试过什么吗？哦，是的：）代码太大，无法复制/粘贴到这里，但我提供的链接有较短的描述和代码示例。如果它只是一个属性（即

字体大小

），那么你可以使用mixin而不是

扩展

。自v1.6.0以来，较少支持使用动态生成的类作为混入。这看起来不像Sass。你说得对。这是少，但我会改为SASS，如果它可以达到的结果。谢谢你的快速回复。你的例子在较少的情况下也能很好地工作。因此，我在问题中添加了一个示例来澄清确切的问题：类的名称也是使用mixin.Yep生成的！我们赢了。我拒绝切换到SASS（因为LESS更类似于CSS）。但这一个功能足以让我切换。谢谢你的快速回复。你的例子在较少的情况下也能很好地工作。因此，我在问题中添加了一个示例来澄清确切的问题：类的名称也是使用mixin.Yep生成的！我们赢了。我拒绝切换到SASS（因为LESS更类似于CSS）。但这一项功能足以让我切换。