Mixin, lai pārvaldītu lūzuma punktus CSS-triki

Atsaucīgi Web dizaina darbi bieži pastāv vairākos dažādos pārtraukuma punktos. Pārvaldīt šos pārtraukuma punktus ne vienmēr ir viegli. To lietošana un atjaunināšana dažreiz var būt garlaicīga. Tāpēc ir nepieciešams mikseris, kas apstrādā pārtraukuma punkta konfigurāciju un lietošanu.

Vienkārša versija

Vispirms jums ir nepieciešama lūzuma punktu karte, kas saistīta ar nosaukumiem.

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

Tad miksins izmantos šo karti.

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

Lietošana:

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

Rezultāts:

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

Papildu versija

Vienkāršā versija ļauj izmantot tikai min-widthmultivides vaicājumus. Lai izmantotu sarežģītākus vaicājumus, mēs varam pielāgot savu sākotnējo karti un mazliet sajaukt.

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

Lietošana:

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

Rezultāts:

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