Mixin pour gérer les points d'arrêt - Astuces CSS

Les créations Responsive Web Design existent souvent sur plusieurs points d'arrêt différents. La gestion de ces points d'arrêt n'est pas toujours facile. Leur utilisation et leur mise à jour peuvent parfois être fastidieuses. D'où la nécessité d'un mixin pour gérer la configuration et l'utilisation des points d'arrêt.

Version simple

Vous avez d'abord besoin d'une carte de points d'arrêt, associée à des noms.

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

Ensuite, le mixin utilisera cette carte.

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

Usage:

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

Résultat:

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

Version avancée

La version simple permet uniquement d'utiliser min-widthdes requêtes multimédias. Pour utiliser des requêtes plus avancées, nous pouvons modifier un peu notre carte initiale et mixer un peu.

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

Usage:

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

Résultat:

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