如何用另一种样式扩展CSS类? [英] How to extend css class with another style?

问题描述

我有将近30个课程，我想将此课程应用于我的button元素.我不想为每个按钮元素添加class属性.有什么办法可以创建新的按钮类吗?

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;

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

推荐答案

您将必须使用CSS预处理器来做到这一点.

You will have to use a CSS preprocessor to do this.

扩展

.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具有相似的特征，也具有 extend 和 mixin ，但是如果您想向另一类添加样式，则LESS会更宽容一些.尽管我认为LESS仍然被认为是mixin，但是您可以像下面这样将一个类样式添加到另一个类样式中，而不必使用关键字.

LESS

LESS has a similar sytanx to SASS and also has extend and 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.

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

这篇关于如何用另一种样式扩展CSS类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！