Bootstrap-Sass: Overriting Variables with using ot

问题:

I'm using Bootstrap-sass for one of my projects and I'd like to customize it with Sass variables (of course).

I created a new .scss file called "_variables.scss" and import this in my main .scss file BEFORE the bootstrap-sass file. It works fine until I reach one point:

If I want to use bootstrap-sass variables in my customization it obviously states that the variable is unknown (because it is imported later). But this is inevitable if I want to change certain variables in a correct way, for example:

$container-desktop: (940px + $grid-gutter-width);

If I want to change just the "fixed" value of 940px to something but I want to still use the $grid-gutter-width variable in my definition I get this error I explained above.

Any Ideas how I can do this?

回答1:

The only solution I've seen is to declare the variables that you depend on. So, in bootstrap-sass's _variables.scss, you find the line $grid-gutter-width: 30px !default; and use it in your own file like so:

$grid-gutter-width: 30px;
$container-desktop: (940px + $grid-gutter-width);

As you're imagining, it's unfortunate to just copy information like that, especially if you end up having to copy several variable definitions just to declare the one you actually want. I too would be very interested if someone has a solution that's more "DRY".