CODEWITHSUNDEEP
csstwitter-bootstrapsass
Manish Champsee
Manish Champsee

Reputation: 465

"Inheritance" of a CSS selector

Is there a way for a CSS class to essentially say do these commands and also the commands of another class?

The use case is that I have a 2 column site using Bootstrap. At the moment, I'm not certain what the relative widths will be and it would be nice to be able to change that in one place in my SCSS file rather than go to every instance of left-column and right-column and add in the required bootstrap classes.

Upvotes: 0

Views: 154

Answers (2)

Frish
Frish

Reputation: 1421

Sometimes the simplest approach is best!

If your issue is that you've got a bunch of:

class="left-column col-md-4"

And perhaps you change your mind and desire

class="left-column col-md-6"

Then a "Find and replace across documents" may work best. Most, if not all, coding editors will have this feature. If you've been consistent with your class naming conventions this could work really well!

Upvotes: 0

code and pixels
code and pixels

Reputation: 674

You can call Boostrap grid/column settings using Sass mixins.

For example:

.your-left-column {
    @include make-col(8);
}

.your-right-column {
    @include make-col(4);
}

This should allow you to set your grid/column widths in one or very few places.

Details here: https://getbootstrap.com/docs/4.0/layout/grid/#mixins

Upvotes: 2

Related Questions