Mixin för att hantera brytpunkter - CSS-tricks

Responsiva webbdesign skapelser finns ofta över flera olika brytpunkter. Att hantera dessa brytpunkter är inte alltid lätt. Att använda dem och uppdatera dem kan ibland vara tråkigt. Därav behovet av en mixin för att hantera brytpunktens konfiguration och användning.

Enkel version

Först behöver du en karta över brytpunkter kopplade till namn.

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

Sedan använder mixen denna karta.

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

Användande:

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

Resultat:

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

Avancerad version

Den enkla versionen gör det bara möjligt att använda min-widthmediefrågor. För att använda mer avancerade frågor kan vi justera vår första karta och mixa lite.

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

Användande:

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

Resultat:

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