从@include 生成变量

Question

我希望这是一个简单的问题。我有 SASS @include 来计算动态字体的大小。

h2 {
   @include rfs(2rem);
}

当屏幕分辨率减小时，我使用它来“缩小”字体的大小。问题是“灰色背景”不会随着字体大小的减小而自动调整。

我在想如果我能以某种方式将@include rfs(2rem) 变成一个变量，我可以做这样的事情：

$fs: @include rfs(2rem);

.grey-background {
   height: calc( #{$fs} + 3vh );
}

我不确定是否需要将其变成 @mixin 或其他内容...我只是希望灰色背景能够自动调整字体大小。

谢谢！

Answer 1

你要找的是SASS @function:

@function rfs($size) {
  @return ...
}

$fs: rfs(2rem);

.grey-background {
   height: calc( #{$fs} + 3vh );
}