在 SASS 中，如何从函数返回列表？

Question

我正在开发一个角度库，并试图创建一个函数，该函数采用颜色托盘和名称并返回一个列表，以便我可以创建 CSS 变量。任何帮助或想法表示赞赏！

$violets-palette: (
100: #e1cced,
200: #9064b3,
300: #6a408a,
400: #5d357e,
500: $violet,
600: #311a52,
700: #2d054c,
800: #28053d,
900: #1f0532
);

$reds-palette: (
50: #fee9e8,
100: #fbc8c6,
200: #f9a4a1,
300: #f77f7b,
400: #f5635e,
500: $precise-red,
600: #f1413c,
700: #ef3833,
800: #ed302b,
900: #ea211d
);

@function createVariables($palette, $name){
  @each $key, $value in $palette {
    @if $key != 'contrast' {
      @if $key == 500 {
        @return '--' + $name  + ':' +  #{$value};
      } @else {
        @return #{'--' + $name + '-' + $key}   + ':' + #{$value};
      }
    } 
  }
}


:root{
  //This would loop over the returned list
  createVariables($reds-palette, 'precise-red');
}

我希望它把它添加到样式表中...

 --precise-red-50
 --precise-red-100
 --precise-red-200
 --precise-red-300
 --precise-red-400
 --precise-red
 --precise-red-600
 --precise-red-700
 --precise-red-800
 --precise-red-900

Answer 1

为什么你的 @function 不起作用： 使用 @return 结束函数，@return 是结果......所以你的 @function 将在你的第一步停止循环。

所以，如果你真的想使用函数，首先将值写入映射，然后将映射返回到 var。

但请注意：在 SASS 中，@function 并不是编写 css 代码的最佳选择。它更用于返回单个值。如果您需要一个多用途的解决方案，请使用 @mixin（将计算代码写入 css 文件），或者如果它是您项目中的单个任务，则简单的 @each 循环也可以完成这项工作。

再想一想：

仅将 var 名称写入 css 甚至在不为其提供值的情况下也无济于事。所以也许你喜欢这样做：

:root {
   --precise-red-50: #fee9e8;
   --precise-red-100: #fbc8c6;
   ...
}

但是。几天前我们在这里有一个非常相似的问题。也许你想看看......它是关于基于类似于你的列表/地图编写 css 颜色变量到 css 文件。如果有或没有向 css vars 提供颜色建议......请根据您的需要调整代码：

https://stackoverflow.com/a/66854088/9268485

---

更新：附加示例

这是最近几天的另一个类似示例。在这种情况下，任务是编写基于颜色的颜色样本构建直接到 css vars。阴影是在相同的过程中计算出来的：

https://stackoverflow.com/a/66850423/9268485

（如果您不确定 Bootstrap 颜色和颜色图，这里是此示例的简短概述：https://getbootstrap.com/docs/5.0/customize/color/）