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

【问题标题】：Extending a class that its name is generated in a mixin扩展其名称在 mixin 中生成的类
【发布时间】：2014-02-21 13:39:42
【问题描述】：

这个问题同时适用于 SASS 和 LESS。

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

示例（LESS，但如果可以的话，我会切换到 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;
}

【问题讨论】：

你有没有尝试过？
哦，是的 :) 代码太大，无法在此处复制/粘贴，但我提供的链接有更短的描述和代码示例。
好吧，如果它只有一个属性（即font-size），那么您可以使用mixins 而不是extend。 Less 支持从 v1.6.0 开始使用动态生成的类作为 mixins。
这看起来不像 Sass。
你是对的。它是LESS，但如果能达到效果，我会换成SASS。

标签： css sass less

【解决方案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;
}

【讨论】：

感谢您的快速回复。您的示例在 LESS 中也可以正常工作。所以我在问题中添加了一个示例来澄清确切的问题：类的名称也是使用 mixin 生成的。
是的！我们有一个赢家。我拒绝切换到 SASS（因为 LESS 更类似于 CSS）。不过这个单一的功能就足够我切换了。