Адаптивное свойство и конвертер 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}));
}
}