Mixin za upravljanje mejnih vrednosti - CSS-triki

Anonim

Odzivne kreacije spletnega oblikovanja pogosto obstajajo na več različnih mejnih točkah. Upravljanje teh mejnih vrednosti ni vedno enostavno. Njihova uporaba in posodabljanje sta včasih dolgočasna. Od tod tudi potreba po mešanici, ki bo obravnavala konfiguracijo in uporabo mejnih vrednosti.

Preprosta različica

Najprej potrebujete zemljevid mejnih točk, povezanih z imeni.

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

Nato bo mixin uporabil ta zemljevid.

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

Uporaba:

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

Rezultat:

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

Napredna različica

Preprosta različica omogoča samo uporabo min-widthmedijskih poizvedb. Za uporabo naprednejših poizvedb lahko prilagodimo naš začetni zemljevid in ga nekoliko premešamo.

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

Uporaba:

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

Rezultat:

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