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

Question

我想编写一个简单的警报组件,它具有颜色变化以及字体图标变体.图标编码为:before.我可以在vanilla CSS中写得很好,但是我想尽可能地在尽可能紧凑的情况下做它并且我坚持使用: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-succes"等等.就像是:

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

但它:之前不再适用了.

Answer 1

看来您正在寻找以下内容:

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

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

这基本上只是扩展.alert-warning从.base-alert使用all关键字.然后将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) {}