How to redeclare Sass variables

[bricebou]

Hi,

It's been a while since I last used Sass and I'm wondering how I can use personal value for some Sass variables instead of redeclaring CSS variables.

Is there a way to do something like that:

$color-primary: rgb(4, 120, 87);
$color-secondary: rgb(6, 182, 212);
$colorCool: $color-primary;
$colorCoolDarker: $color-primary;
@import "baseline";
@include typographyBaseline();

Thanks a lot and in advance !

[bricebou]

Just for testing, editing the node_modules/typography-baseline.scss/sass/baseline/colors.variables.scss file, adding !default at each variable permits to override it. But is there another way ?

[paceaux]

this is my mistake; those variables should have had !default so they could have been overridable.

However, I need to revisit this approach since the Dart Sass team has plans to deprecate old import methods.

[paceaux]

Created #4 specifically to making this work for newer versions of sass.

A branch should be opened, however, so that the variables can be properly overwritten in the mean time.

[bricebou]

Some things have changed while I was away from Sass :-) Thanks for the reading ! And thanks in advance for the improvements you'll make to this project :)

[paceaux]

Notes for me when I tackled this next week:

1. this isn't just a case of setting !default or !global on a bunch of variables
2. Issue is partly that the variables are added to maps
3. Issue might be that variables are added to maps added to maps accessed inside of typographyBaseline(); the mutated version of the variable isn't updated b/c variables are storing value, not reference (IDK how Sass behaves in this regard)
4. Most likely, need to change how the variables are exported in their variable files.
5. That probably means changing import strategy
6. Also means I probably need to rewrite this whole thing for Dart Sass

[paceaux]

other note for me:

easy way to test this module is to just use the debug.scss:

@import '../sass/_baseline';

$baseTitleSize: 13em;
$titleFontFamily: 'Comic Sans MS';
@include typographyBaseline(headings, $exclude: cssVariables )