Sass变量能否存储@include混入调用？如何实现？

嗨，我来帮你理清这个问题！首先直接说结论：不能直接把@include的调用结果存入变量，但我们可以通过调整写法来实现类似的需求，下面详细说原因和解决方法：

为什么你的代码会报错？ #

SCSS里的变量$foo只能存储合法的CSS表达式值（比如颜色#fff、字符串、数值、渐变函数这类返回值），而@include是一个SCSS指令，它的作用是把混入（mixin）里的CSS代码片段直接插入到当前位置，并不是返回一个可以赋值给变量的“值”。所以当你写$foo: @include bgGradient(...)时，SCSS解析器会困惑——它期待变量后面跟的是一个值，结果看到的是@include指令，自然就抛出错误了。

正确的实现方式 #

根据你的需求，我们有两种常用方案：

方案1：将混入改为函数（推荐） #

如果你的混入只是用来生成单一属性的值（比如这里的background-image渐变），最适合的方式是把mixin改成SCSS函数。函数的作用就是返回一个计算后的值，这样就能把结果存入变量了：

// 定义函数，返回渐变值
@function bgGradient($color1, $color2) {
  @return linear-gradient(to bottom, $color1 0%, $color2 100%);
}

// 将函数返回的渐变值存入变量
$foo: bgGradient(#fff, #000);

// 在样式中使用变量
.my-element {
  background-image: $foo;
  // 还可以搭配其他属性
  background-repeat: no-repeat;
  background-size: cover;
}

方案2：如果必须使用混入（多属性场景） #

如果你的混入里包含多个CSS属性（比如除了渐变背景，还有padding、border等），那没法把整个混入的输出存入变量，但可以通过占位符选择器来复用样式：

@mixin bgGradient($color1, $color2) {
  background-image: linear-gradient(to bottom, $color1 0%, $color2 100%);
  background-repeat: no-repeat;
  background-size: cover;
}

// 定义占位符，调用混入
%gradient-bg {
  @include bgGradient(#fff, #000);
}

// 复用样式
.my-element {
  @extend %gradient-bg;
  color: #333;
}

当然你也可以直接在需要的元素选择器里调用混入，同样能达到样式复用的目的。

内容的提问来源于stack exchange，提问作者HuskyBlue