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

Question

我想问一下如何通过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)
   }

Answer 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};
  }
}