DEV Community

loading...

Discussion on: CSS Custom Properties (vars) with SASS/SCSS, a practical architecture strategy

Collapse
bfintal profile image
Benjamin Intal

This is exactly what I'm trying to do. This is great to keep your styles DRY.
I've extended this further so that the fallback values would automatically be placed by the cssvar() mixin. Perhaps others may find this useful, here's my modification:

Add this at the top to hold all the styles:

$_cssvars: ();
Enter fullscreen mode Exit fullscreen mode

Add this at the start of the cssvars() mixin to gather all the styles:

$_cssvars: map-merge( $_cssvars, $css_variables ) !global;
Enter fullscreen mode Exit fullscreen mode

Then finally, change the output of the cssvar() mixin:

@return var(--#{$prefix}-#{$name}, map-get( $_cssvars, $name ) );
Enter fullscreen mode Exit fullscreen mode

Afterwards the cssvar() mixin would automatically add the fallback value, you'll get this:

height: cssvar(btn-height, 40px);
Enter fullscreen mode Exit fullscreen mode
Collapse
felipperegazio profile image
Felippe Regazio Author

holy shit thats awesome, thanks!