So, the behavior you are seeing is the expected one and I will explain.
At the base of the Sass styling is the
bootstrap.scss file that imports the
_variables.scss file. It also imports all of the rest of the theme files. That
bootstrap.scss file is imported for the final compile by the
custom.scss file. The cascade order without the Design panel being activated is to add any rules duplicated from the
_variables.scss to the
custom.scss file, followed by the main
bootstrap.scss file. When the Design panel is activated, the Design panel rules/variables are added at the top of the
custom.scss file. So, what does this mean?
Without the Design panel activated, the duplicated variable in the
_variable.scss file is after the original variable. Therefore, the compiler will use the later value - just like in a normal cascade where the last rule declared is the one that is applied. If you elect to copy the rule/variable to the
custom.scss sheet (this is the way you should be doing it) then the new value will be added before the bootstrap import. However, the
_variable.scss has the values post-fixed with
!default, so they are only used if the variable hasn’t already been declared, so your value in
custom.scss will be used in the compiler.
Finally - and here we get to the behavior you are seeing - when the Design panel is activated, the variables are defined at the very top of the
custom.scss file. Both the duplicated variables and any variables not post-fixed with
!default in the Bootstrap theme files will override these Design panel variables. Basically, the compiler when it sees multiple variables with the same name will select the last one loaded.
So, two suggestions for working with variables, Sass, and the Design panel.
- Only use new, unique variable names in your custom Sass unless you want to override the values set in the Design panel.
- Always duplicate your variables/rules to the
custom.scss file to avoid overwrite of custom values when Bootstrap updates.
Does this make sense?