Адаптивное свойство и конвертер px в em/rem

Кто знает, помогите с решением вопроса. Дело вот в чем, есть два миксина на scss: один для адаптивного свойства, другой для конвертации px в em/rem. Как мне сделать, чтобы миксин с конвертацией единиц измерений подхватывал именно актуальный размер шрифта из миксина для адаптивного свойства? Если кто в курсе, это показывал на своем канале Фрилансер по жизни.

Должно выглядеть это следующим образом:

.block{
   @include adaptive-value(font-size, 30, 20, 0);
   & p{
    margin-bottom: em(20);
  }
}

По задумке, размер шрифта равный тридцати должен меняться при изменении ширины вьюпорта и вместе с ним, подхватывая это число должно меняться и относительное значение внешнего нижнего отступа. 

//Конвертации px в em/rem

@use "sass:math";
// TO %
@function prc($pxOne, $pxTwo) {
  $result: math.div($pxOne, $pxTwo) * 100%;
  @return $result;
}

// TO REM
@function rem($px) {
  $result: math.div($px, 16) + rem;
  @return $result;
}

// TO EM
@function em($px) {
  $result: math.div($px, 16) + em;
  @return $result;
}
//Адаптивное свойство
$maxWidth: 1920;
$maxWidhtContainer: 1170;
@mixin adaptiv-value($property, $startSize, $minSize, $type) {
  $addSize: $startSize - $minSize;
  @if $type==1 {
    //Только если меньше контейнера
    #{$property}: $startSize + px;
    @media (max-width: #{$maxWidhtContainer+px}) {
      #{$property}: calc(#{$minSize+px} + #{$addSize} * ((100vw-320px) / #{$maxWidhtContainer-320}));
    }
  }
  @else if $type==2 {
    // Только если больше контейнера
    #{$property}: $startSize + px;
    @media (min-width:#{$maxWidhtContainer+px}) {
      #{$property}: calc(#{$minSize+px} + #{$addSize} * ((100vw-320px) / #{$maxWidth-320}));
    }
  }
  @else {
    // Всегда
    #{$property}: calc(#{$minSize+px}+ #{$addSize} * ((100vw-320px) / #{$maxWidth-320}));
  }
}

Ответы (0 шт):