extending bootstrap is ignored in Rails

Question

I want to do this

.bip_control{
    @extend .form-control;
    color:red;
}

but the resulting css looks like

.bip_control{
  color: red;
}

Am I missing something?

Answer 1

I tried out your code and for me it seems to work as expected. Assuming you are importing the bootstrap files into the Sass file were you define .bip-control, as this is the only way you can extend the bootstrap rules with your selectors. I added an example on Sassmeister:

http://sassmeister.com/gist/8973529

@import "bootstrap";
.bip_control{
    @extend .form-control;
    color:red;
}

Importing bootstrap like this should include all bootstrap rules that you can extend (see here, however you can also import only individual components/mixins files, then you just need to make sure that you include the rules you want to extend and their dependencies).

If you look at the generated CSS, from line #2015 on, you will find all the .form-contro rules extended with the .bip_control selector.
For expample:

.form-control, .bip_control { ...
...
.form-control:focus, .bip_control:focus { ...
...

All the additional properties that belong only to .bip_control are added as another ruleset at the end of the rest of the imported bootstrap rules (or where ever you have defined it). This CSS rule set will also be returned, if the rules that you are trying to extend are not imported/included properly, and not available to the @extend directive.

---

^{You can maybe see better on how @extend works from the example in this answer (in case I haven't showed it well enough on the above bootstrap example): SCSS - override an @extend with another @extend}