Created by: ydmitry
PoC for suggestion from this issue https://github.com/twbs/bootstrap/issues/26596#issuecomment-694214372
It adds some rules for variables usage:
- In SCSS styles files (e.g.
_table.scss
) we use only SCSS variables in style properties- It makes SCSS style more clean, so that we don't have mix of CSS variables and SCSS variables together here
- Simplier to work with this file as we know that we need to work with SCSS variables only
- Allows to remove properties from CSS output together with selectors by setting
null
to variables which can reduce output CSS file size - Depend on application requirements library user can select which to use SCSS variables or CSS variables
- "Use var() in Sass variables and not directly in components" (c) ffoodd https://github.com/twbs/bootstrap/issues/26596#issuecomment-695957040
- In SCSS variables file (
_variables.scss
) we can set CSS variables as a value, e.g.$x: var(--x);
- This creates flexibility and provides example how to create variants by font size or border width, was asked in this comment https://github.com/twbs/bootstrap/issues/26596#issuecomment-607125580
- We can set not only CSS variables, but formulas of CSS variable so for easier customization it will be enough to operate with one variable
- Possible here to override on application side:
- specific value, e.g.
$table-bg: $red;
- reference to another CSS variable
$table-bg: var(--primary-color);
- set to null
$table-bg: null;
to remove property together with CSS variable declaration$table-bg-var: null;
- set to custom expression of CSS other variables
$table: hsl(var(--color),var(--l));
- specific value, e.g.
- We use CSS custom properties together with
$enable-custom-properties
variable in SCSS styles file (e.g._table.scss
)- It makes backport to IE11 easier by replacing SCSS variables, maybe without all color variants, but they can be created on application side using good SCSS styles file (e.g.
_table.scss
) - Easier to reason about what exactly CSS variable will change
- It makes backport to IE11 easier by replacing SCSS variables, maybe without all color variants, but they can be created on application side using good SCSS styles file (e.g.
- We generate variants (modifications) using CSS variables with modification classname