-
Notifications
You must be signed in to change notification settings - Fork 1
CSS and Sass
The _variables.scss file now contains both Sass variables and CSS variables.
CSS variables have been added in a :root pseudo-class as part of our future self-service CSS feature. The CSS variables allow us to override parts of a site's theme (previously done with Sass variables) without requiring a Sass build and site deploy.
At the top of the variables file is the :root pseudo-class block. This contains the variables that are most commonly modified during a site style. Below that is a block of Sass variables labelled 'Bootstrap 4 overrides'. These are assigned values from the :root block, but these $ variables are still required by Bootstrap due to the partial nature of their CSS variable support. Below that block is a big list of Sass variables which are used by Bootstrap and in our Sass files. These variables may be converted to CSS variables in the future but for now they are fine as Sass variables.
There are some issues when using CSS variables with Sass and Bootstrap that you will need to work around.
While Sass is able to assign CSS variables to properties and even accept them as function parameters, it is not able to read them. This means that passing CSS variables into Sass functions which perform calculations will cause build errors. For example:
darken(var(--primary), 10%) --> Error: $color: var(--primary) is not a color.
Unfortunately, Sass doesn't know what to do when passing a CSS variable containing processed RGB into the rgba CSS function. Because of this, the :root block contains both raw RGB and processed RGB versions of colours so we can use alpha or no alpha. For example:
background-color: var(--body-bg);
background-color: rgba(var(--body-bg-rgb), 0.5);
Sass can also have trouble with CSS variable math. The calc CSS function can handle most basic math operations using CSS variables however. For example:
height: var(--navbar-brand-padding-y) * 2; --> Error: Undefined operation "var(--navbar-brand-padding-y) * 2".
height: calc(var(--navbar-brand-padding-y) * 2); --> works fine.
Unfortunately Bootstrap 4 barely supports CSS variables, and the ones that it does support have problems. In the _variables.scss file, there is a block labelled "Boostrap 4 overrides". Even though these Sass variables are assigned CSS variables, they are required to override the default values in Bootstrap where it doesn't pick up the CSS variables.
There is also a selection of Bootstrap class overrides in the _bootstrap4.scss file. These classes in Bootstrap pass colours through various Sass functions which cause build failures so the override classes in this file assign colour properties in a more direct manner to avoid errors.
Core Template uses both prettier and stylelint for auto-formatting and style warnings. Run npm run css:lint.