Mixin για διαχείριση σημείων διακοπής - CSS-Κόλπα

Anonim

Οι δημιουργίες Responsive Web Design υπάρχουν συχνά σε πολλά διαφορετικά σημεία διακοπής. Η διαχείριση αυτών των σημείων διακοπής δεν είναι πάντα εύκολη. Η χρήση τους και η ενημέρωσή τους μπορεί μερικές φορές να είναι κουραστική. Εξ ου και η ανάγκη για ένα mixin για χειρισμό διαμόρφωσης και χρήσης σημείου διακοπής.

Απλή έκδοση

Πρώτα χρειάζεστε έναν χάρτη σημείων διακοπής, που σχετίζεται με ονόματα.

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

Στη συνέχεια, το mixin θα χρησιμοποιήσει αυτόν τον χάρτη.

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

Χρήση:

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

Αποτέλεσμα:

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

Σύνθετη έκδοση

Η απλή έκδοση επιτρέπει μόνο τη χρήση min-widthερωτημάτων πολυμέσων. Για να χρησιμοποιήσουμε πιο σύνθετα ερωτήματα, μπορούμε να τροποποιήσουμε τον αρχικό μας χάρτη και να αναμίξουμε λίγο.

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

Χρήση:

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

Αποτέλεσμα:

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