Skip to content

Instantly share code, notes, and snippets.

@Andrii-Yukhymenko
Created May 29, 2021 16:58
Show Gist options
  • Save Andrii-Yukhymenko/0cd0adbcf1f76bd6761d109098b5cdc5 to your computer and use it in GitHub Desktop.
Save Andrii-Yukhymenko/0cd0adbcf1f76bd6761d109098b5cdc5 to your computer and use it in GitHub Desktop.
Миксин для адаптивных свойств
// Адаптивные свойства
$maxWidth: 1920;
$maxWidthContainer: 1200;
@mixin adaptiv-value($property, $startSize, $minSize, $type) {
$addSize: $startSize - $minSize;
@if $type==1 {
// Только если меньше контейнера
#{$property}: $startSize + px;
@media (max-width: #{$maxWidthContainer + px}) {
#{$property}: calc(#{$minSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidthContainer - 320}));
}
}
@else if $type==2 {
// Только если больше контейнера
#{$property}: $startSize + px;
@media (min-width: #{$maxWidthContainer + px}) {
#{$property}: calc(#{$minSize + px} #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320}));
}
}
@else {
// Всегда
#{$property}: calc(#{$minSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth - 320}));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment