如何用另一种风格扩展 css 类？答案

【问题标题】：How to extend css class with another style?如何用另一种风格扩展 css 类？
【发布时间】：2021-10-15 01:30:20
【问题描述】：

我有近 30 个类，我想将这些类应用到我的按钮元素。我不想为每个按钮元素添加类属性。有什么方法可以创建一个新的按钮类；

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

【问题讨论】：

不能使用纯 CSS。您可以使用 SASS 或 Less 等处理器。
@putvande 除了将所有 css 类一一添加到所有按钮之外，还有其他解决方法吗？

标签： css

【解决方案1】：

您必须使用 CSS 预处理器来执行此操作。

SASS

placeholder

%rounded-corner {}
%corner {}
%button-effective {}

.button {
  @extend %rounded-corner;
  @extend %corner;
  @button-effective;

  /* Some other styles. */
}

.box {
  @extend %rounded-corner;
}

编译为：

.button, .box {
  /* rounded-corner styles */
}

.button {
  /* corner styles here */
}

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

.button {
  /* Some other styles. */
}

/*
`.box` is NOT defined here because it only uses placeholders. So it
is placed where the placeholder is defined.
*/

注意： 使用占位符时，CSS 选择器会添加到定义占位符的任何位置。不是定义选择器的地方。

extend

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

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

编译为：

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

mixin

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

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

编译为：

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

少

LESS 具有与 SASS 相似的 sytanx，并且也具有 extend 和 mixin，但如果您想将一个类的样式添加到另一个类，LESS 会更宽容一些。虽然我相信在 LESS 中仍然被认为是一个 mixin，但您可以将一种类样式添加到另一种类样式中，如下所示，而无需使用关键字。

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

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

编译为：

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

【讨论】：

【解决方案2】：

这在 CSS4 中是可能的：

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

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

目前，您需要使用 Sass/Less 预处理器。

【讨论】：

这里说@apply已被废弃：/ tabatkins.github.io/specs/css-apply-rule xanthir.com/b4o00
There is no such thing as CSS4. There will never be a CSS4.

【解决方案3】：

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

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

或

<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. */

...然后您的 CSS 将是：

[class*="button"]{/*Generic button styles*/}
[class*="rounded"]{/*Rounded styles*/}
[class*="corner"]{/*Corner styles*/}
[class*="effective"]{/*Effective styles*/}

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

例如：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您正在描述mixin 或extends，如果您使用像LESS 或SASS 这样的CSS 预处理器，目前这是可能的。 CSS 预处理器允许您编写具有额外功能的非 CSS，然后通过预处理器运行它以将其转换为提供给浏览器的常规 CSS。

在常规 CSS 中不可能做到你所描述的。

【讨论】：

【解决方案6】：

使用CSS modules，您可以使用composes：

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

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

【讨论】：