通过@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 );
}