Mixin valdyti lūžio taškus CSS-gudrybės

Interaktyvūs interneto dizaino kūriniai dažnai egzistuoja keliuose skirtinguose taškuose. Ne visada lengva valdyti tuos lūžio taškus. Jų naudojimas ir atnaujinimas kartais gali būti varginantis. Todėl reikalingas mišinys, kad būtų galima tvarkyti pertraukos taško konfigūraciją ir naudojimą.

Paprasta versija

Pirmiausia jums reikia pertraukimo taškų žemėlapio, susieto su pavadinimais.

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

Tada „mixin“ naudos šį žemėlapį.

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

Naudojimas:

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

Rezultatas:

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

Išplėstinė versija

Paprasta versija leidžia naudoti tik min-widthmedijos užklausas. Norėdami naudoti pažangesnes užklausas, galime pakoreguoti savo pradinį žemėlapį ir šiek tiek susimaišyti.

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

Naudojimas:

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

Rezultatas:

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