如何用另一种样式扩展css类？

我有将近30个类，我想将这些类应用于我的按钮元素。我不想为每个按钮元素添加class属性。有没有办法创建一个新的button类，比如

.button{
        .rounded-corner
        .corner
        .button-effective
        //another 20 classes
}

---

在CSS4中有可能：

 :root {
  --toolbar-theme: {
    border-radius: 4px;
  };
  --toolbar-title-theme: {
    color: green;
  };
}

.toolbar {
  @apply --toolbar-theme;
  @apply --toolbar-title-theme;
}

---

现在，您需要使用Sass/Less预处理器。

是的，您可以使用Less或Sass。对我来说，Less“更容易”集成到您的项目中，您将拥有以下代码：

.button{
    .rounded-corner
    .corner
    .button-effective
}
.secondClass{
    .button;
    // your style code
}
.thirdClass{
    .button;
    // your style code
}

---

您可以使用属性选择器并连接您的类；它仍然需要向button元素添加一个长类：

<button class="button-rounded-corner-effective">Your button</button>

不过，您需要注意名称空间-通配符选择器将匹配与字符串匹配的任何类

例如：

[class*="round"]{/*Will match rounded*/}

---

您必须使用CSS预处理器来完成此操作

无礼

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  @extend .rounded-corner;
  @extend .corner;
  @extend .button-effective
  // Continue with other classes.
}

@mixin rounded-corner {}
@mixin corner {}
@mixin button-effective {}

.button {
  @include .rounded-corner;
  @include .corner;
  @include .button-effective
  // Continue with other classes.
}

汇编至：

.rounded-corner, .button {}
.corner, .button {}
.button-effective, .button {}

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  @extend .rounded-corner;
  @extend .corner;
  @extend .button-effective
  // Continue with other classes.
}

@mixin rounded-corner {}
@mixin corner {}
@mixin button-effective {}

.button {
  @include .rounded-corner;
  @include .corner;
  @include .button-effective
  // Continue with other classes.
}

汇编至：

.rounded-corner, .button {}
.corner, .button {}
.button-effective, .button {}

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

较少的 LESS与SASS有一个类似的sytanx，也有extend和mixin，不过如果您想将一个类的样式添加到另一个类中，LESS会更宽容一些。虽然我认为仍然可以用更少的时间来考虑mixin，但是您可以像下面这样将一个类样式添加到另一个类样式中，而不必使用关键字

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  .rounded-corner;
  .corner;
  .button-effective;
  // Continue with other classes.
}

汇编至：

.rounded-corner, .button {}
.corner, .button {}
.button-effective, .button {}

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

---

您正在描述一个

mixin

或一个

extends

，如果您使用诸如LESS或SASS之类的CSS预处理器，这在当前是可能的。CSS预处理器允许您编写具有额外功能的非CSS，然后通过预处理器运行它，将其转换为常规CSS，并提供给浏览器

在常规CSS中不可能实现您所描述的功能。

使用，您可以使用

组合：

.className {
  color: green;
  background: red;
}

.otherClassName {
  composes: className;
  color: yellow;
}

没有简单的CSS。。您可以使用诸如SASS或更少的处理器。@putvande除了将所有css类逐个添加到所有按钮之外，还有其他解决方法吗？这里说，
@apply
已被放弃：/