时间戳

首页 > 解决方案 > 在 SASS 中，如何从函数返回列表？

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

问题描述

我正在研究一个角度库，并试图创建一个函数，该函数接受一个颜色托盘和一个名称并返回一个列表，以便我可以创建 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

标签： sass

解决方案

为什么你@function不工作：随着@return你结束函数和@return结果......所以你@function将在循环的第一步停止。

因此，如果您真的想使用函数，请先将值写入映射并将映射返回给 var。

但请注意：在 SASS 中，a@function并不是向 css 编写代码的最佳选择。它更用于返回单个值。如果您需要一个多用途的解决方案，请使用 a @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/ ）

推荐阅读