The variables.scss file has two purposes.
- To override Bootstrap default Sass variable values
- To set Sass variable values specific to Bootstrap Genesis
The problem occurs with when this file is loaded.
In the first case, if we want to override a Bootstrap variable, we should load our file before the Bootstrap Sass files.
In the second case, if we want to set a Bootstrap Genesis variable using a Bootstrap core variable (e.g. $widgetFontColor: $text-color), we should load our file after the Bootstrap Sass files.
Therefore, we should split variables.scss into variables-bootstrap-core-override.scss and variables-bootstrap-genesis.scss, loading the former before the Boostrap core Sass files and the later after the Bootstrap core Sass files.
See discussion in #72
The
variables.scssfile has two purposes.The problem occurs with when this file is loaded.
In the first case, if we want to override a Bootstrap variable, we should load our file before the Bootstrap Sass files.
In the second case, if we want to set a Bootstrap Genesis variable using a Bootstrap core variable (e.g.
$widgetFontColor: $text-color), we should load our file after the Bootstrap Sass files.Therefore, we should split
variables.scssintovariables-bootstrap-core-override.scssandvariables-bootstrap-genesis.scss, loading the former before the Boostrap core Sass files and the later after the Bootstrap core Sass files.See discussion in #72