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"。我想使用:extend()在LESS中对变体类进行编码，因此在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";
  }
}

这基本上只是使用all keyword从.alert-warning扩展.base-alert。然后，伪元素的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（）

1 个答案: