Optimize Sass variables list - sass

Question

I have this list of color variables:
//** Smoke
$smoke-hex-l-10: #504c51;
$smoke-hex-l-20: #575358;
$smoke-hex-l-25: #5b575c;
$smoke-hex-l-30: #5e5a60;
$smoke-hex-l-40: #656167;
$smoke-hex-l-50: #6d686e;
$smoke-hex-l-60: #746f76;
$smoke-hex-l-70: #7b767d;
$smoke-hex-l-75: #7f7981;
$smoke-hex-l-80: #827d84;
$smoke-hex-l-90: #89848b;
$smoke-hex-l-100: #908b92;
$smoke-hex-d-10: #423f43;
$smoke-hex-d-20: #3c3a3d;
$smoke-hex-d-25: #3a373b;
$smoke-hex-d-30: #383539;
$smoke-hex-d-40: #343135;
$smoke-hex-d-50: #302e31;
$smoke-hex-d-60: #2d2b2e;
$smoke-hex-d-70: #2b292b;
$smoke-hex-d-75: #29282a;
$smoke-hex-d-80: #282629;
$smoke-hex-d-90: #262427;
$smoke-hex-d-100: #242325
Is there a way to optimize this list in some way? I'm not very good a Sass, but I've read about Sass Maps, but I can't wrap my head around the concept.
Or if a list like that it's just the way to do it?
Thanks for your help.

Answer 1

Of course you can use sass maps to store these variables, it may look like this:
//** Smoke
$smoke-hex-l: (
10: #504c51,
20: #575358,
25: #5b575c,
30: #5e5a60,
40: #656167,
50: #6d686e,
60: #746f76,
70: #7b767d,
75: #7f7981,
80: #827d84,
90: #89848b,
100: #908b92,
);
$smoke-hex-d: (
10: #423f43,
20: #3c3a3d,
25: #3a373b,
30: #383539,
40: #343135,
50: #302e31,
60: #2d2b2e,
70: #2b292b,
75: #29282a,
80: #282629,
90: #262427,
100: #24232,
);
and can be accessed like: $smoke-color: map-get($smoke-hex-l, 10);
However it looks like these colors are just lighten / darken versions of common base color, something like #49464a. In this case you can simplify your code by using color manipulation functions that are available in Sass. In particular lighten() and darken() will be enough to replace whole set of colors that you have.