IE11 was fine postcss([ postCSSCustomProperties({ importFrom: ‘./dist/css-variables.css’ }), postCSSCalc() ]))
.selector { margin-top: 40px; margin-top: calc(var(—space-l) * 1.25); }
Slide 24
I quickly missed SCSS errors Error: Undefined variable: “$button-border-widht”. on line 31 of path/to/button.scss from line 8 of path/to/qbit-all.scss >> -width: #{$button-border-widht}; ———————————————-^
Slide 25
Non-draconian error handling… .selector { color: var(—colour-that-does-not-exist); }
…means this does not throw an error.
Slide 26
Stylelint to the rescue! “plugins”: [ “stylelint-scss”, “stylelint-value-no-unknown-custom-properties” ]
path/to/component.css 85:18 ✖ Unexpected custom property “—colour-hoover” inside declaration “color”.
Slide 27
A shout out to calc() —header-height: calc(var(—grid-unit) * 12);
Slide 28
So what went….not so well?
Slide 29
SCSS habits $variant1: value; $variant2: value;
// just do this in every file! it’s all good! @import “_import-vars-everywhere.scss”; .elementvariant1 { color: $variant1; } .elementvariant2 { color: $variant2; }
Slide 30
All aboard the bloat boat @import “_repeat-your-css-vars-everywhere.scss”;
Be sure to only import your CSS vars once 😳