Mixin murdepunktide haldamiseks - CSS-trikid

Tundlikud veebidisaini loomingud eksisteerivad sageli mitme erineva murdepunkti vahel. Nende murdepunktide haldamine pole alati lihtne. Nende kasutamine ja ajakohastamine võib mõnikord olla tüütu. Sellest tuleneb vajadus mixini järele, et murda murdepunkti seadistamisel ja kasutamisel.

Lihtne versioon

Kõigepealt vajate nimedega seotud murdepunktide kaarti.

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

Seejärel kasutab mixin seda kaarti.

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

Kasutamine:

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

Tulemus:

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

Täpsem versioon

Lihtne versioon võimaldab kasutada ainult min-widthmeediumipäringuid. Täpsemate päringute kasutamiseks saame oma esialgset kaarti muuta ja natuke segada.

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

Kasutamine:

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

Tulemus:

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