Question

我希望将四个类的样式合二为一。并添加更多风格。我对SCSS不太确定。这是正确的方法吗？

.react-datagrid {
  @extend .table;
  @extend .table-striped;
  @extend .table-bordered;
  @extend .table-condensed;
  display: flex;
}

Answer 1

正如你在这个jsfiddle中看到的那样：https://jsfiddle.net/0nptv6sf/1/

HTML：

<div class="react-datagrid">test</div>

SCSS：

.table {
  color: red;
}

.table-striped {
  font-size: 10px;
}

.table-bordered {
  background-color: black;
}

.table-condensed {
  padding: 10px;
}

.react-datagrid {
  @extend .table;
  @extend .table-striped;
  @extend .table-bordered;
  @extend .table-condensed;
  display: flex;
}

Answer 2

＃这里的另一个概念

＃单个CSS .table { 红色; }

.table-striped {
  font-size: 10px;
}

.table-bordered {
  background-color: black;
}

.table-condensed {
  padding: 10px;
}

用于扩展多个类的覆盖或扩展

.element {
   @xtend .table; 
   @extend .table-striped;
   @extend .table-bordered;
   @extend .table-condensed;
}

比上一个扩展好

.element {
    @extend #{'.table', '.table-striped', '.table-bordered','.table- 
              condensed',....'.class-n'};
    // ohters css here
}

这很简单并且可以正常工作，只需要在第二个卷曲黄铜中添加。

===谢谢===

使用SCSS添加多个类的样式？

2 个答案: