Mixin om breekpunten te beheren - CSS-trucs

Anonim

Responsive Web Design-creaties bestaan ​​vaak uit verschillende breekpunten. Het beheren van die breekpunten is niet altijd gemakkelijk. Het gebruik ervan en het bijwerken ervan kan soms vervelend zijn. Vandaar de behoefte aan een mixin om de breekpuntconfiguratie en het gebruik af te handelen.

Simpele versie

Eerst heb je een kaart met breekpunten nodig, die aan namen zijn gekoppeld.

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

Vervolgens zal de mixin deze kaart gebruiken.

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

Gebruik:

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

Resultaat:

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

Geavanceerde versie

De eenvoudige versie maakt het alleen mogelijk om min-widthmediaquery's te gebruiken . Om meer geavanceerde zoekopdrachten te gebruiken, kunnen we onze eerste kaart aanpassen en een beetje mixen.

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

Gebruik:

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

Resultaat:

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