Rails + bootstrap-sass mixins

Question

Maybe I don't understand how to use mixin with sass, or how to work with the ones with bootstrap-sass (https://github.com/thomas-mcdonald/bootstrap-sass). But how can I do something like change the box-shadow on a class of input fields?

EDIT: Should clarify, in this example I'm trying to change the glow effect on an active input field when it is selected. By default it's blue.

For my project setup, I have it just like it says on the github page and have the gem in the Gemfile and then in a controller I have something like:

@import "bootstrap"
.testInput {
  /*(here I have put a variation of variables that I change to see 
  if I can do something with the mixin like $bordercolor: #000;*/
  @include formFieldState()
}

So maybe my understanding of how sass works is way off. I guess if I wanted to change the box-shadow for inputs I could just repeat the code in my own mixin but it was also just kind of a general question on if this kind of thing was possible with the other mixins as well.

Answer 1

Did you look at the source to see what the formFieldState mixin does? It lives here: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss#L159. It looks like this mixin is designed to be used within some type of container, most likely a form.

There are no variables controlling the default input:focus box-shadow (its declaration is here: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_forms.scss#L126). You'll have to override it the old fashioned way.

Answer 2

You should put the things you want to change after the @include, instead of before. The last declaration wins with CSS so if you put them before the mixin, the mixin version will win.

See here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ for an advanced discussion of CSS precedence.