Skip to content
GitLab

feat(table): variables strategy change - SCSS and CSS variables

Closed Administrator requested to merge github/fork/ydmitry/feature/variables-strategy into main

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:

  1. 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
  2. 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));
  3. 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
  4. We generate variants (modifications) using CSS variables with modification classname