3

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?

rasmus1610
  • 181
  • 3
  • 14
  • http://stackoverflow.com/questions/19430217/bootstrap-3-set-container-width-to-940px-maximum-for-desktops http://stackoverflow.com/questions/19393264/why-does-bootstrap-3-force-the-container-width-to-certain-sizes/19411815#19411815 – Al-Mothafar May 13 '15 at 08:43
  • I doubt that linking to two other questions is pretty helpful on stackoverflow. That's actually pretty lame. And actually these links are not really an answer to my questions. It solves my grid problem but that was just an example. I can easily manage this by manually setting the `$grid-gutter-width` to `30px` but that can't be the best practice in general. It's more a general thing how to overwrite bootstrap sass variables with bootstrap-sass variables :D – rasmus1610 May 13 '15 at 08:52
  • I afraid that you have to add an additional file to override variables or modify the bootstrap sass file directly. – Hieu Le May 13 '15 at 10:34
  • You can't use a variable that hasn't been declared yet. – cimmanon May 13 '15 at 10:36
  • It's not solution for your issue, its describes your issue ! and if you read the issues and solution you will know the root of your issue, specially : http://stackoverflow.com/questions/19430217/bootstrap-3-set-container-width-to-940px-maximum-for-desktops – Al-Mothafar May 13 '15 at 12:06

1 Answers1

2

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".

Chris Clark
  • 1,439
  • 2
  • 17
  • 25
  • It would be cool if someone wrote a program that would look at your variable declarations (in this case, just `$container-desktop`), and then create a temporary copy of `_variables.scss` replacing variable declarations in-place. Then you could pass the modified `_variables.scss` to the sass compiler. This would actually solve the problem - no need to re-declare `$grid-gutter-width`. – Chris Clark May 18 '15 at 13:50