将字符串传递给 sass mixin 中的变量

我有一个非常简单的 mixin，如下所示：

@mixin global( $variable-name ) {
    font-size:   #{$variable-name}-font-size;
}

我之前定义了变量 $input-font-size 并将其按以下格式传递到 mixin 中

@include global( input );

问题是 sass 没有转换它并且浏览器返回：

字体大小：输入字体大小

我应该如何编写我的 mixin 以实际返回 $input-font-size 的值？

感谢您提前的建议！

您无法在 sass 中创建动态变量。

'#{}' 意味着它将把任何属性转换为其纯 CSS 形式，它不会被视为变量，而是被视为文本。

您可以做的是为属性列表创建一个映射并在 mixin 中调用它们。

$input-font-size: 16px;
$textarea-font-size: 14px;


$var-map: (
  input: $input-font-size, 
  textarea:  $textarea-font-size,
);

@mixin global( $variable-name ) {
    font-size:  map-get($var-map, $variable-name);
}

body {
  @include global( input );
}

或者如果您不想创建映射，那么您可以简单地在 mixin 中传递变量名称

@mixin sec( $variable-name ) {
  font-size: $variable-name;
}
.text-area {
  @include sec( $textarea-font-size );
}

样品笔https://codepen.io/srajagop/pen/aWedNM https://codepen.io/srajagop/pen/aWedNM