Sass中position:sticky混合宏报错：未定义变量$sticky求解

别担心，刚接触SASS遇到这种小问题太正常啦！咱们来一步步拆解你的问题：

报错原因分析 #

你收到的Undefined variable: "$sticky"错误，是因为在调用混合宏@include position($sticky)时，$sticky这个变量并没有被定义或赋值。你可能混淆了混合宏的参数名和调用时需要传入的具体值——混合宏里的$sticky是参数占位符，调用时需要传入实际的CSS值（比如sticky），而不是重复写参数名。

修正后的代码方案 #

方案1：简化混合宏并传入具体值 #

首先优化你的混合宏（参数名可以更通用，同时去掉不必要的前缀，现在主流浏览器对sticky的支持已经不需要-moz-、-ms-、-o-这些前缀了，保留-webkit-即可兼容大部分场景）：

@mixin position($value) {
  -webkit-position: $value;
  position: $value;
}

然后调用时直接传入sticky这个具体值：

.menu-link {
  z-index: 12;
  @include position(sticky);
}

方案2：给混合宏设置默认值（更便捷） #

如果你大部分场景下都是用sticky，可以给混合宏的参数设置默认值，这样调用时甚至不用传值：

@mixin position($value: sticky) {
  -webkit-position: $value;
  position: $value;
}

// 调用时直接写，默认使用sticky
.menu-link {
  z-index: 12;
  @include position();
}

// 如果需要其他position值，也可以传入，比如：
.footer {
  @include position(relative);
}

这样修改后，你的代码就不会再报错啦，而且写法更灵活简洁。

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