Mixin для управління точками зупинку - CSS-хитрощі

Адаптивні твори веб-дизайну часто існують у декількох різних точках зупинку. Управління цими точками зупинку не завжди легко. Їх використання та оновлення іноді може бути нудним. Звідси необхідність змішання для обробки конфігурації та використання точки зупинку.

Проста версія

Спочатку вам потрібна карта точок зупинку, пов’язана з іменами.

$breakpoints: ( 'small': 767px, 'medium': 992px, 'large': 1200px ) !default;

Потім міксин використовуватиме цю карту.

/// Mixin to manage responsive breakpoints /// @author Hugo Giraudel /// @param (String) $breakpoint - Breakpoint name /// @require $breakpoints @mixin respond-to($breakpoint) ( // If the key exists in the map @if map-has-key($breakpoints, $breakpoint) ( // Prints a media query based on the value @media (min-width: map-get($breakpoints, $breakpoint)) ( @content; ) ) // If the key doesn't exist in the map @else ( @warn "Unfortunately, no value could be retrieved from `#($breakpoint)`. " + "Available breakpoints are: #(map-keys($breakpoints))."; ) )

Використання:

.selector ( color: red; @include respond-to('small') ( color: blue; ) )

Результат:

.selector ( color: red; ) @media (min-width: 767px) ( .selector ( color: blue; ) )

Розширена версія

Проста версія дозволяє лише використовувати min-widthмедіа-запити. Щоб використовувати більш розширені запити, ми можемо налаштувати свою початкову карту та трохи змішати.

$breakpoints: ( 'small': ( min-width: 767px ), 'medium': ( min-width: 992px ), 'large': ( min-width: 1200px ) ) !default;

/// Mixin to manage responsive breakpoints /// @author Hugo Giraudel /// @param (String) $breakpoint - Breakpoint name /// @require $breakpoints @mixin respond-to($breakpoint) ( // If the key exists in the map @if map-has-key($breakpoints, $breakpoint) ( // Prints a media query based on the value @media #(inspect(map-get($breakpoints, $breakpoint))) ( @content; ) ) // If the key doesn't exist in the map @else ( @warn "Unfortunately, no value could be retrieved from `#($breakpoint)`. " + "Available breakpoints are: #(map-keys($breakpoints))."; ) )

Використання:

.selector ( color: red; @include respond-to('small') ( color: blue; ) )

Результат:

.selector ( color: red; ) @media (min-width: 767px) ( .selector ( color: blue; ) )