46 lines
1.4 KiB
SCSS
46 lines
1.4 KiB
SCSS
@use "sass:math";
|
|
$maxWidthContainer: 1123;
|
|
//перевод в %
|
|
@function prc($pxOne, $pxTwo) {
|
|
$result: math.div($pxOne, $pxTwo) * 100%;
|
|
@return $result;
|
|
}
|
|
//перевод в rem
|
|
@function rem($px) {
|
|
$result: math.div($px, 8) + rem;
|
|
@return $result;
|
|
}
|
|
//перевод в em
|
|
@function em($px, $size:16) {
|
|
$result: math.div($px, $size) + em;
|
|
@return $result;
|
|
}
|
|
|
|
|
|
//адаптивное свойство
|
|
@mixin adaptiv-value($property, $startSize, $minSize, $type) {
|
|
$addSize: $startSize - $minSize;
|
|
@if $type == 1 {
|
|
//только если меньше контейнера, присутствует ограничение
|
|
#{$property}: $startSize+px;
|
|
@media (max-width: em($maxWidthContainer)) {
|
|
#{$property}: calc(
|
|
#{$minSize+px} + #{$addSize} *
|
|
((100vw - 320px) / #{$maxWidthContainer - 320})
|
|
);
|
|
}
|
|
} @else if $type == 2 {
|
|
//только если больше контейнера, min-width
|
|
#{$property}: rem($startSize);
|
|
@media (min-width: #{$maxWidthContainer + px}) {
|
|
#{$property}: calc(
|
|
#{rem($minSize)} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320})
|
|
);
|
|
}
|
|
} @else {
|
|
//всегда на всех экранах
|
|
#{$property}: calc(
|
|
#{rem($minSize)} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320})
|
|
);
|
|
}
|
|
} |