Mixin til at styre breakpoints - CSS-tricks

Responsive webdesign kreationer findes ofte over flere forskellige breakpoints. Det er ikke altid let at styre disse breakpoints. Brug af dem og opdatering af dem kan undertiden være kedeligt. Derfor er behovet for en mixin til at håndtere breakpoint-konfiguration og -brug.

Enkel version

Først skal du bruge et kort over breakpoints, der er knyttet til navne.

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

Derefter bruger mixin dette kort.

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

Anvendelse:

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

Resultat:

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

Avanceret version

Den enkle version gør det kun muligt at bruge min-widthmedieforespørgsler. For at bruge mere avancerede forespørgsler kan vi tilpasse vores oprindelige kort og mixin lidt.

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

Anvendelse:

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

Resultat:

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