优化Sass变量列表

我有以下颜色变量列表：

//** 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地图的书，但是我不能理解这个概念

或者如果一张这样的单子，这只是一种方法

---

谢谢您的帮助。

当然，您可以使用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中提供的颜色操纵函数来简化代码。特别是，这将足以取代您拥有的整套颜色。
啊！我明白了，我离这里不远。非常感谢您提供的使用以及。关于
lighte（）
/
darken（）
函数，您可能会认为这是可行的（这实际上是我的第一种方法），但事实并非如此。Sass射出了一种与我们所需要的完全不同的颜色（虽然不疯狂，但仍然不同），所以这种方法对我们来说不是很好。如果你问我的话，我觉得很奇怪。再次感谢@RicardoZea您的颜色范围并不完全笔直，但您可以通过应用其他颜色操作来调整它。例如，您可以在HSB颜色空间中绘制颜色，以查看它们的外观，并使用颜色函数重新实现这一行颜色。颜色范围不完全直是什么意思？@RicardoZea查看不同颜色空间中的颜色（我以
$smoke-hex-d
为例）：
\504c51=HSB（288,6,32）=lab（33,3，-2）
，
242325=hsb（270,5,15）=lab（14,1，-1）
。如您所见-主要的变化是HSB中的
B
和Lab中的
L
，这意味着该颜色范围主要淡入黑暗。然而，色调有轻微的变化，饱和度也有微小的变化。虽然饱和度变化可以忽略-色调变化在这里，因此您的颜色范围不能完全被
lighting（）
和
darken（）
所取代，因为结果会略微改变different@RicardoZea如果您的颜色是手动选择的，那么最好使用颜色贴图，就像我的答案中列出的那样。此外，如果需要，您可以查看函数以获得中间颜色。