使用 mixin 作为变量答案

【问题标题】：Use mixin as variable使用 mixin 作为变量
【发布时间】：2020-09-13 22:01:07
【问题描述】：

我有一个像这样的@mixin，我想将它包含在我的 scss 文件中：

@mixin my-gradient {
  background: -webkit-linear-gradient(to top, #24243e, #302b63, #0f0c29);
  background: linear-gradient(to top, #24243e, #302b63, #0f0c29);
}

我的 Scss 文件中有 $mainColor，它设置了我项目的所有颜色。

我的问题是，我如何将 @mixin 与 $mainColor 放在同一个文件中？

【问题讨论】：

您是否尝试为$mainColor 和mixin 设置相同的background？
是的，我尝试为 $mainColor 设置 mixin。在 $mainColor 的颜色与 mixin 的颜色相同的情况下。

标签： css sass mixins node-sass scss-mixins

【解决方案1】：

我不确定这是否是您所要求的，但您可以将颜色的变量直接放在 mixin 中。

 @mixin my-gradient {
   background: -webkit-linear-gradient(to top, $mainColor, $secondaryColor, $thirdColor);
   background: linear-gradient(to top, $mainColor, $secondaryColor, $thirdColor);
 }

【讨论】：

谢谢，但我尝试做相反的过程（为 $mainColor 设置 mixin）