css - 使用 :extend() in LESS with pseudo-elements

Question

我想编写一个具有颜色变化和字体图标变化的简单警报组件。这些图标使用 :before 进行编码。我可以用 vanilla CSS 写得很好，但我想用尽可能紧凑的 LESS 来写，我坚持使用我很少使用的 :extend() :(

.base-alert {
    color: red;
    ...
    &:before {
        content: 'base-icon-unicode';
        ...
    }
}

在 vanilla CSS 中，变体类的代码如下:

.alert-warning {
    color: red;
}
.alert-warning:before {
    content "warning-icon-unicode";
}

但是 HTML 应该是 class="base-alert alert-warning"。我想在 LESS 中编写变体类，使用 :extend() 所以在 HTML 中我只会写 class="alert-warning" 或 class= “警报成功” 等等。像这样的东西:

.alert-warning {
    &:extend(.base-alert);
    color: orange;
    &:before {
       content "warning-icon-unicode";
    }
}

但是 :before 不再适用。

Answer 1

您似乎在寻找以下内容:

.alert-warning:extend(.base-alert all) {
  color: orange;

  &:before {
    content: "warning-icon-unicode";
  }
}

这基本上只是使用 all keyword 从 .base-alert 扩展了 .alert-warning .然后伪元素的 content 值更改为 warning-icon-unicode 并且颜色更改为橙​​色。

---

根据您关于扩展到多个类的评论，我想您可以使用以下内容，这实际上只是选择器的别名:

.alert-warning, .alert-warning2 {
  &:extend(.base-alert all);

  color: orange;

  &:before {
    content: "warning-icon-unicode";
  }
}

或者，根据您的喜好，您也可以使用以下方法，这将产生相同的预期结果。

.alert-warning:extend(.base-alert all),
.alert-warning2:extend(.base-alert all) {
  color: orange;

  &:before {
    content: "warning-icon-unicode";
  }
}

..这也同样有效:

.alert-warning:extend(.base-alert all) {
  color: orange;

  &:before {
    content: "warning-icon-unicode";
  }
}

.alert-warning2:extend(.alert-warning all) {}