Adding the styles of multiple classes using SCSS?

Question

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;
}

Jacques Cornat · Accepted Answer · 2016-09-10 16:05:47Z

1

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;
}

answered Sep 10, 2016 at 16:05

Jacques Cornat

1,6521 gold badge20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vijayst Over a year ago

thanks for fiddling it out. not sure about scss. was thinking of some other keyword other than extend.

Md. Abu Sayed · Accepted Answer · 2020-07-02 10:26:59Z

0

#Another concept here

#single css .table { color: red; }

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

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

.table-condensed {
  padding: 10px;
}

for extend multiple class overwrite or extend

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

it's better than prev extend

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

It's simple and works fine, just u add inside the second curly brasses.

===Thank you===

answered Jul 2, 2020 at 10:26

Md. Abu Sayed

2,5363 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Adding the styles of multiple classes using SCSS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related