Написал такой миксин адаптивного свойства:
@import "./settings.scss";
@mixin adaptiveProperty($property, $startValue, $secondValue, $mode) {
$addValue: $startValue-$secondValue;
@if ($mode == 1) {
@media (max-width: #{$maxWidthContainer+px}) {
#{$property}: calc(
#{$startValue+px}+$addValue * (100vw-#{$minWidth+px}) / (#{$maxWidthContainer+px}-#{$minWidth+px})
);
}
} @else if ($mode == 2) {
@media (min-width: #{$maxWidthContainer+px}) {
#{$property}: calc(
#{$startValue+px}+$addValue * (100vw-#{$minWidth+px}) / (#{$maxWidthContainer+px}-#{$minWidth+px})
);
}
} @else {
#{$property}: calc(#{$startValue+px}+(#{$addValue}* ((100vw-#{$minWidth+px}) / #{$maxWidth-$minWidth})));
}
}
В файле settings.scss
такие настройки:
$font-family: "Roboto";
$fontSize: 16;
$maxWidthContainer: 1000;
$maxWidth: 1920;
$minWidth: 320;
Теперь при вызове миксина таким образом:
.test_header{
@include adaptiveProperty("font-size", 30, 16, 0) // Шрифт должен быть 30px на экране шириной 1920px и уменьшаться до 16px на 320px
}
Но в скомпилированном css файле я получаю такое свойство:
.test_header {
font-size: calc(
30px+calc(30px-16px)px* (100vw-320px) / (1920px-320px)
);
}
Там после скобки calc(30px - 16 px)
лишние px
и, кажется, лишний перевод строки. Думаю из-за этого мой миксин не работает. Как исправить формулу, чтобы убрать эти лишние px
из готового результата?