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

Using :extend() in LESS with pseudo-elements

我想编写一个具有颜色变化和字体图标变化的简单警报组件。图标用 :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 不再适用。

您似乎在寻找以下内容:

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