How to reuse (extend) bootstrap css classes in rails/sass

Question

I @import "boostrap" in core.scss file which also import other scss files (e.g.: _modals.css).

In modals.css I want to extend some bootstrap classes:

.modal-container {
  @extend .row;
}

And extend does not work as expected:

WARNING on line 42 of ....../_modals.css.scss: ".row" failed to @extend ".row". The selector ".row" was not found. This will be an error in future releases of Sass. Use "@extend .row !optional" if the extend should be able to fail.

The only way I made it work is to @import "bootstrap" again in _modals.scss but this actually includes the whole bootsrap inside this file...

The other solution is to move all definitions which extends css in core.css file - in this case - css in much less structured ...

How should I do it properly?

knagode · Accepted Answer · 2014-02-17 12:26:49Z

4

Problem was because I also imported files via sass require/require_tree command.

 *= require_tree ./autoinclude

If all files are imported via @import function, everything works!

@import "autoinclude/*";

answered Feb 17, 2014 at 12:26

knagode

5,9735 gold badges53 silver badges73 bronze badges

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

Comments

Hichem ben chaabene · Accepted Answer · 2014-02-19 17:33:51Z

0

The .row has to be in the same file somewhere in the previous lines of code.

@extend is not that good and you can't use it within media queries, if you overuse it you will end up introducing inconsistencies on the code.

define a mixin in another file and use @import instead

answered Feb 19, 2014 at 17:33

Hichem ben chaabene

1456 bronze badges

Collectives™ on Stack Overflow

How to reuse (extend) bootstrap css classes in rails/sass

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related