如何使用另一种样式扩展 css 类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41635618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extend css class with another style?
提问by hellzone
I have nearly 30 classes and I want to apply this classes to my button element. I don't want to add class attribute for every button element. Is there any way to create a new button class like;
我有近 30 个类，我想将这些类应用于我的按钮元素。我不想为每个按钮元素添加 class 属性。有没有办法创建一个新的按钮类；
.button{
.rounded-corner
.corner
.button-effective
//another 20 classes
}
回答by hungerstar
You will have to use a CSS preprocessor to do this.
您将不得不使用 CSS 预处理器来执行此操作。
SASS
SASS
.rounded-corner {}
.corner {}
.button-effective {}
.button {
@extend .rounded-corner;
@extend .corner;
@extend .button-effective
// Continue with other classes.
}
Compiles to:
编译为：
.rounded-corner, .button {}
.corner, .button {}
.button-effective, .button {}
@mixin rounded-corner {}
@mixin corner {}
@mixin button-effective {}
.button {
@include .rounded-corner;
@include .corner;
@include .button-effective
// Continue with other classes.
}
Compiles to:
编译为：
.button {
/* rounded-corner styles here */
/* corner styles here */
/* button-effective styles here */
}
LESS
较少的
LESS has a similar sytanx to SASS and also has extendand mixin, though LESS is a little more forgiving if you want to add one class' style to another. While I believe still considered a mixin in LESS, you can add one class style to another like the following without having to use a keyword.
LESS 具有与 SASS 类似的 sytanx 并且还具有extend和mixin，但如果您想将一个类的样式添加到另一个类，则 LESS 更宽容一些。虽然我认为在 LESS 中仍然被认为是一种混合，但您可以将一种类样式添加到另一种样式中，如下所示，而无需使用关键字。
.rounded-corner {}
.corner {}
.button-effective {}
.button {
.rounded-corner;
.corner;
.button-effective;
// Continue with other classes.
}
Compiles to:
编译为：
.button {
/* rounded-corner styles here */
/* corner styles here */
/* button-effective styles here */
}
回答by plvice
It will be possible in CSS4:
在 CSS4 中可以实现：
:root {
--toolbar-theme: {
border-radius: 4px;
};
--toolbar-title-theme: {
color: green;
};
}
.toolbar {
@apply --toolbar-theme;
@apply --toolbar-title-theme;
}
For now, you need to use Sass/Less preprocessors.
现在，您需要使用 Sass/Less 预处理器。
回答by Jayx
You could use the attribute selector and concatenate your classes; it would still involve adding a long class to your button element:
您可以使用属性选择器并连接您的类；它仍然涉及向您的按钮元素添加一个长类：
<button class="button-rounded-corner-effective">Your button</button>
OR
或者
<button class="button rounded corner effective">Your button</button>
/* Which is exactly what you did not want to do,
but the CSS below will apply all the same.
This example to clarify, then. */
... and then your CSS will be:
...然后你的 CSS 将是：
[class*="button"]{/*Generic button styles*/}
[class*="rounded"]{/*Rounded styles*/}
[class*="corner"]{/*Corner styles*/}
[class*="effective"]{/*Effective styles*/}
You will need to be careful about the namespacing though - the wild card selector will match any class that has that matches the string.
不过，您需要注意命名空间 - 通配符选择器将匹配具有匹配字符串的任何类。
For example:
例如：
[class*="round"]{/*Will match rounded*/}
回答by Brenton Strine
You are describing a mixinor an extends, which is possible currently if you use a CSS Preprocessor like LESS or SASS. CSS Preprocessors allow you to write non-CSS with extra features, and then run it through the preprocessor to convert it into regular CSS which is given to the browser.
您正在描述 amixin或 an extends，如果您使用 LESS 或 SASS 之类的 CSS 预处理器，则目前可以使用。CSS 预处理器允许您编写具有额外功能的非 CSS，然后通过预处理器运行它以将其转换为提供给浏览器的常规 CSS。
It's not possible in regular CSS to do what you are describing.
在常规 CSS 中不可能执行您所描述的操作。
回答by mickaelw
Yes you can use Less or Sass. For me, Less is "easier" to integrate to your project and you will have this code :
是的，您可以使用 Less 或 Sass。对我来说，Less“更容易”集成到您的项目中，您将拥有以下代码：
.button{
.rounded-corner
.corner
.button-effective
}
.secondClass{
.button;
// your style code
}
.thirdClass{
.button;
// your style code
}
