css - 从@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 );
}