Bootstrap-Sass: Overriting Variables with using other Variable

做~自己de王妃 提交于 2019-12-08 03:26:00

问题


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



来源:https://stackoverflow.com/questions/30208379/bootstrap-sass-overriting-variables-with-using-other-variable

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!