我想编写一个简单的警报组件,它具有颜色变化以及字体图标变化。 图标编码为: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) {}更多推荐
发布评论