How to use SCSS to make a class that contains bootstrap classes

sass, twitter-bootstrap-3

Solution

In order to be able to use extend, you should also make sure that you use `@import` to include bootstrap in your project. (cfr. http://sass-lang.com/guide#topic-5)

so basically you would use `@import "bootstrap";` (using the bootstrap sass project: https://github.com/twbs/bootstrap-sass).

If bootstrap isn't included in your scss, you won't be able to extend the classes.

example:

/* Import bootstrap-sass so that we have access to all of its selectors */
@import "bootstrap";

.product-layout {
    @extend .col-sm-4;
    @extend .col-md-3;
    @extend .col-lg-2;
}

Problem

My problem is that I have several DIVs that all look like this: ``` <div class="col-sm-4 col-md-3 col-lg-2"> ... ``` The thing is, if I decide to change the layout of this, I want to change all of them at once. I tried doing this: CSS: ``` .product-layout { @extend .col-sm-4; @extend .col-md-3; @extend .col-lg-2; } ``` HTML: ``` <div class="product-layout"> ... ``` But this didn't work. Is there some way to do this?

Original source