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()就足以替换您拥有的整个颜色。

优化Sass变量列表

1 个答案: