如何在 sass 中连接字符串和变量？

Question

如何连接字符串和变量来创建一个sass中已经存在的变量名？

$size: "sm";

$button-sm: 1rem;
$buttom-md: 1.5rem;

body {
    font-size: $button-#{$size};
}

输出

body {
  font-size: 1rem;
}

Answer 1

简而言之，否，很遗憾，您不能像那样动态生成变量。 您只能动态更改 CSS 属性的值。 与您尝试实现的目标非常接近的解决方法可能是这样的：

$size: "rm";
$button-font: 1;

body {
   font-size: $button-font#{$size};
}

另一种选择可能是创建这样的 mixin，通过将另一个 $size 变量传递给 mixin，您可以选择自定义 font-size。

$size: 2;
$sizes: 1rem 2rem 3rem;

@mixin button($index) {
  font-size: nth($sizes, $index);
}

body {
  @include button($size);
}

可能的事情是将 CSS 与 SCSS 变量结合起来。
如果您选择使用这种组合，这可能是您的解决方案：

$size: sm;

:root {
  --button: 1em;
  --button-sm: 2rem;
  --buttom-md: 3rem;
}

body {
  font-size: var(--button - $size);
}