在带有伪元素的 LESS 中使用 :extend()

Question

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

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

原版 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-succes" 等等。类似于：

.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) {}

在带有伪元素的 LESS 中使用 :extend()

Using :extend() in LESS with pseudo-elements

css

less

pseudo-element