通过 SASS 函数自动生成 css 变量答案

【问题标题】：Auto generate css variables by SASS function通过 SASS 函数自动生成 css 变量
【发布时间】：2018-10-23 10:43:37
【问题描述】：

我想问一下如何通过sass函数自动生成css变量

例如：我希望这个变量自动生成

:root{--sample1:red;}

SASS 函数：

@function brand($key,$val) {
 //this not works  
 :root{
    --#{$key}:$val;
  }
@return val(--#{$val});}

使用品牌功能

   header{
       background-color:brand("sample1",red)
   }

【问题讨论】：

自动生成是什么意思？
我的意思是生成变量我的 SASS 函数
这并没有说明什么。给我们输入和预期输出以及您希望使用的方法。你的意思是使用预处理器吗？它应该如何自动生成？
至少你的var(--#{$val}) 是错误的，因为它应该是#{$key}
这家伙使用地图来创建类似的东西。他的方法很有趣，也许它可以帮助您找到更好的方法来解决您的问题：codepen.io/jakealbaugh/post/css4-variables-and-sass

标签： css sass mixins css-variables

【解决方案1】：

我实现了类似的东西，这是这个想法。

$spacing: (
  none: none,
  01: 4px,
  02: 8px,
  03: 16px,
  04: 24px,
  05: 32px,
  06: 40px,
  07: 48px,
  08: 56px,
  09: 64px,
  10: 72px,
  11: 80px,
  12: 88px,
  13: 96px
);

:root {
  // SPACING Custom Properties
  @each $space, $value in $spacing {
    --spacing-#{$space}: #{$value};
  }
}

【讨论】：