Почему не работает миксин, который управляет адаптивом
У меня есть миксин для sass, который адаптивно уменьшает размер в пикселях, он принимает в себя :свойство, размер в макете, размер на 320, режим, и автоматически уменьшает размер при уменьшении экрана:
@mixin adaptive_size($property, $font_in_current_scale, $font_in_the_smallest_screen, $type){
$additional_size: $font_in_current_scale - $font_in_the_smallest_screen;
@if $type == 1{
// только уменьшение при уменьшении экрана.
#{$property}: $font_in_current_scale + px;
@media (max-width: #{$container_width + px}){
#{$property}: calc(#{$font_in_the_smallest_screen + px} + #{$additional_size} * ((100vw - 320px) / #{$container_width - 320}));
}
} @else if $type == 2{
// только увеличение при увеличении экрана.
#{$property}: $font_in_current_scale + px;
@media (min-width: #{$screen_width + px}){
#{$property}: calc(#{$font_in_the_smallest_screen + px} + #{$additional_size} * ((100vw - 320px) / #{$screen_width - 320}));
}
} @else{
// всегда будет изменяться пропорционально ширине экрана.
#{$property}: calc(#{$font_in_the_smallest_screen + px} + #{$additional_size} * ((100vw - 320px) / #{$screen_width - 320}));
}
}
Я решил его переписать, чтобы можно было добавлять минимальную ширину, то есть не 320, а указывать это в миксине, но ничего не работает совсем, в чем может быть проблема:
@mixin adaptive_size_width($property, $font_in_current_scale, $font_in_the_smallest_screen, $min_width, $type){
$additional_size: $font_in_current_scale - $font_in_the_smallest_screen;
@if $type == 1{
// только уменьшение при уменьшении экрана.
#{$property}: $font_in_current_scale + px;
@media (max-width: #{$container_width + px}){
#{$property}: calc(#{$font_in_the_smallest_screen + px} + #{$additional_size} * ((100vw - $min_width + px) / #{$container_width - $min_width}));
}
} @else if $type == 2{
// только увеличение при увеличении экрана.
#{$property}: $font_in_current_scale + px;
@media (min-width: #{$screen_width + px}){
#{$property}: calc(#{$font_in_the_smallest_screen + px} + #{$additional_size} * ((100vw - $min_width + px) / #{$screen_width - $min_width}));
}
} @else{
// всегда будет изменяться пропорционально ширине экрана.
#{$property}: calc(#{$font_in_the_smallest_screen + px} + #{$additional_size} * ((100vw - $min_width + px) / #{$screen_width - 320}));
}
}