5-10 minutes
| Bootstrap challenges with CSS variables and design tokens | Adam Stankiewicz + Raccoon Gang
| Bootstrap does calculations with SCSS variables in its own SCSS files (e.g., $padding-x * .75); this only works when $padding-x is a value other than a CSS variable, as Dart SASS can’t do that calculation when $padding-x is a CSS variable (throws an error). Using calc and SCSS interpolation, we can get around the problem for now if we manually copy/duplicate the affected Bootstrap SCSS files into the Paragon codebase and no longer import from the Bootstrap file directly, so we have full control over it. We are on latest v4 of Bootstrap, and don’t imagine Bootstrap will have another v4 release (since v5 is latest). Is copying Bootstrap’s SCSS into our own to get around the issue with calc as viable solution?
|
