Does variable names change between releases?
The variable names shouldn't change as Bootstrap 4 is now in "real" release (out of beta).
The variables are there for a good reason: Your CSS shouldn't break when you upgrade. (not counting major versions of course).
Of course new variables can be added, as those shouldn't break your CSS.
If you are in any way unsure before upgrading, you can always check the changelogs. Those should tell about any breaking changes.
Using variables in SCSS
When you have set up your build tools, and created your SCSS file (let's say
custom.scss), you can import Bootstrap and override any variable you want (you'll find them in
_variables.scss in the Bootstrap source code):
//Your variable overrides
//Let us change the primary color which is set in the primary variable
//In this case we are importing everything
//Here we are using NodeJS with NPM, so your files should be here
Some things to note:
- If you aren't using NodeJS, then just make sure that the import path directs to the
bootstrap.scss file (don't put
.scss in the import)
- If you have checked the source code of Bootstrap 4, you may have seen
!default after every variable. Don't include that in your override. It just tells Sass that the variable can be replaced
There's a bunch of good information about this in the docs, so feel free to check there if you are missing anything (or ask).