SASS Variables & Options
Remember: We recommend to run gulp with some node runner. By default, as defined in your theme package.json build-css script we recommend using npx (which comes by default with npm 5.2+). Change build-css script to your needs and use some other runner, fe. yarn gulp sass
SASS Variables:
There are hundreds of variables you can customize, which are trackable via the inspector in the browser of choice, when compiling your theme with the :dev option.
theme-options.yml
Here you can override variables from parent themes and bootstrap. These variables won't be inherited.
It's not possible to use variable names as values if not defined above in the .yml file!
Will be left as is for the moment: #3071854
sass/variables/_theme_name.scss
Here you can put your custom variables and overwrite everything. These variables will be inherited by a custom child theme.
With the current setup it's not possible to use variables from parent theme(s). This will result in "Undefined variable" error.
If you want to use a variable from a parent theme in this file, you need to redefine it.
In all other SASS files (base/*, components/*, layout/*, theme/*) the (overwritten) variables are present.
You find the following options for SASS compilation in the following files:
.browserslistrc
Here you can set the browsers(list) used by Autoprefixer.
.stylelintrc.yml
CSS formating.
gulp-options.yml
The main file sits in the bs_base theme, all sub-themes (including bs_bootstrap) import the options from bs_base.
Beside the SASS configuration you also find the following properties:
- Autoprefixer's grid option
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion
