在LESS中使用：extend（）和伪元素(Using :extend() in LESS with pseudo

在LESS中使用：extend（）和伪元素(Using :extend() in LESS with pseudo-elements)

我想编写一个简单的警报组件，它具有颜色变化以及字体图标变化。 图标编码为:before 。 我可以在香草CSS里写得很好，但是我想尽可能地做得很紧凑，而且我坚持使用: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"; } }

但它：之前不适用了。

I would like to code a simple alert component that has color variations as well as font icon variations. The icons are coded with :before. I can write it fine in in vanilla CSS but I want to do it in LESS as compact as possible and I am stuck with using :extend() which I rarely used :(

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

In vanilla CSS the code for the variation classes would be like:

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

But then the HTML should be class="base-alert alert-warning". I would like to code the variation classes in LESS, using :extend() so in HTML I would only write class="alert-warning" or class="alert-succes" and so on. Something like:

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

But it the :before doesn't apply anymore.

最满意答案

看起来你正在寻找以下内容：

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

这基本上只是使用all关键字从.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) {}

It seems like you are looking for the following:

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

This basically just extends .alert-warning from .base-alert using the all keyword. Then the content value for the pseudo-element is changed to warning-icon-unicode and the color is changed to orange.

---

Based on your comment about extending to multiple classes, I guess you could use the following, which will essentially just alias the selector:

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

Alternatively, depending on your preferences, you could also use the following, which will produce the same desired results.

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

..this will work the same as well:

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