Создание переменной из @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 );
}