Sass 生成动态SCSS变量

我喜欢Tailwind定义颜色的方式，并希望在Tailwind项目之外使用这种方式

为此，我定义了两种已经生成为类的颜色（bg-| text-）：

我想（如果可能的话）生成适当的SCSS变量。 e、 g.

$blue-300:#183f6d

可能吗

$tailwind-colors: ("blue-900": #183f6d, "blue-300": #c4cddd);

@each $name, $hexcode in $tailwind-colors {
    
  // Generate Variables
  // #{$name}: $hexcode; <--- You can achieve this if you do it as a separate function inside the 
:root
 element of your SCSS file.

$tailwind-colors: ("blue-300": #183f6d, "blue-900": #c4cddd);

// Generate Variables
:root {
  @each $name, $hexcode in $tailwind-colors {
    --#{$name}: #{$hexcode};
  }
}

@each $name, $hexcode in $tailwind-colors {
  // Generate Classes
  .text-#{$name} {
    color: $hexcode;
  }

  .bg-#{$name} {
    background-color: $hexcode;
  }
}

$tailwind colors:（“蓝色-900”：#183f6d，“蓝色-300”：#c4cddd）；
@每个$name，$hexcode采用$tailwind颜色{
//生成变量
//#{$name}:$hexcode；如果将其作为SCSS文件的
：root
元素中的一个单独函数来执行，则可以实现这一点

$tailwind colors:（“蓝色-300”：#183f6d，“蓝色-900”：#c4cddd）；
//生成变量
：根{
@每个$name，$hexcode采用$tailwind颜色{
--#{$name}:#{$hexcode}；
}
}
@每个$name，$hexcode采用$tailwind颜色{
//生成类
.text-#{$name}{
颜色：$hexcode；
}
.bg-#{$name}{
背景色：$hexcode；
}
}

这将导致格式化CSS：

：根目录{
--蓝色-300:#183f6d；
--蓝色-900:#c4cddd；
}
.text-blue-300{
颜色：#183f6d；
}
.bg-blue-300{
背景色：#183f6d；
}
.text-blue-900{
颜色：#c4cddd；
}
.bg-blue-900{
背景色：#c4cddd；
}

使用右上角的下拉按钮查看编译后的CSS

非常感谢Roy。这是一种很好的方法，在项目中也很实用。不幸的是，我实际上需要变量在SCSS中访问它。不过，非常感谢！