Question

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

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

Answer 1

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

SASS

<强> 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

LESS与SASS有类似的sytanx，并且还有扩展和 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 */
}

Answer 2

CSS4中可以实现：

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

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

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

Answer 3

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

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

...然后你的CSS将是：

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

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

例如：

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

Answer 4

是的，您可以使用Less或Sass。对我来说，Less is＆＃34;更容易＆＃34;要集成到您的项目中，您将获得以下代码：

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

Answer 5

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

在常规CSS中无法完成您所描述的内容。

Answer 6

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

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

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

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

6 个答案:

SASS

LESS