Mixin для управления точками прерывания онлайн урок.


Реагирующие создания веб-дизайна часто существуют на нескольких разных контрольных точках. Управление этими точками останова не всегда легко. Их использование и их обновление иногда могут быть утомительными. Следовательно, необходимо, чтобы mixin обрабатывал конфигурацию и использование точки останова.

# Простая версия

Сначала вам нужна карта точек останова, связанных с именами.

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

Затем mixin будет использовать эту карту.

/// 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;
}
}

# Расширенная версия

Простая версия позволяет использоватьминимальную ширинумедиа-запросов. Чтобы использовать более сложные запросы, мы можем немного изменить нашу начальную карту и немного смешать.

$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;
}
}