Mixin zum Verwalten von Haltepunkten - CSS-Tricks

Anonim

Responsive Webdesign-Kreationen existieren häufig über mehrere verschiedene Haltepunkte. Die Verwaltung dieser Haltepunkte ist nicht immer einfach. Ihre Verwendung und Aktualisierung kann manchmal mühsam sein. Daher ist ein Mixin erforderlich, um die Konfiguration und Verwendung von Haltepunkten zu handhaben.

Einfache Version

Zuerst benötigen Sie eine Karte mit Haltepunkten, die Namen zugeordnet sind.

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

Dann verwendet das Mixin diese Karte.

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

Verwendung:

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

Ergebnis:

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

Erweiterte Version

Die einfache Version ermöglicht nur die Verwendung von min-widthMedienabfragen. Um erweiterte Abfragen zu verwenden, können wir unsere ursprüngliche Karte optimieren und ein wenig mischen.

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

Verwendung:

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

Ergebnis:

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