Оптимизировать список переменных Sass

Question

У меня есть этот список цветовых переменных:

//** 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

Есть ли способ каким-то образом оптимизировать этот список?Я не очень хорош Sass, но я читал о Sass Maps, но я не могу обдумать концепцию.

Или, если список такой, то это просто способ сделать это?

Спасибо за вашу помощь.

Answer 1

Конечно, вы можете использовать sass карты для хранения этих переменных, это может выглядеть так:

//** 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,
);

и может быть доступно как: $smoke-color: map-get($smoke-hex-l, 10);

Однако это выглядит такцвета просто светлые / темные версии общего базового цвета, что-то вроде #49464a.В этом случае вы можете упростить свой код, используя функции управления цветом, доступные в Sass.В частности, lighten() и darken() будет достаточно для замены всего набора цветов, который у вас есть.