vijayst vijayst - 3 months ago 13
Sass (Sass) Question

Adding the styles of multiple classes using SCSS?

I want to include the styles of four classes in one. And add some more style. I am not too sure about SCSS. Is this the right way to do it?

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

Answer

it is, as you can see in this 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;
}