Mixin pentru a gestiona punctele de întrerupere - CSS-Tricks

Anonim

Creațiile responsive de design web există adesea pe mai multe puncte de întrerupere diferite. Gestionarea acestor puncte de întrerupere nu este întotdeauna ușoară. Folosirea lor și actualizarea acestora pot fi uneori obositoare. De aici și necesitatea unui mixin pentru a gestiona configurația și utilizarea punctelor de întrerupere.

Versiune simplă

Mai întâi aveți nevoie de o hartă a punctelor de întrerupere, asociate cu numele.

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

Apoi, mixinul va folosi această hartă.

/// 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))."; ) )

Utilizare:

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

Rezultat:

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

Versiune avansată

Versiunea simplă face posibilă doar utilizarea min-widthinterogărilor media. Pentru a utiliza interogări mai avansate, putem să ne modificăm harta inițială și să o amestecăm puțin.

$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))."; ) )

Utilizare:

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

Rezultat:

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