Kesme Noktalarını Yönetmek için Mixin - CSS Hileleri

Duyarlı Web Tasarımı kreasyonları genellikle birkaç farklı kesme noktasında bulunur. Bu kesme noktalarını yönetmek her zaman kolay değildir. Bunları kullanmak ve güncellemek bazen sıkıcı olabilir. Bu nedenle, kesme noktası yapılandırmasını ve kullanımını ele almak için bir miksine ihtiyaç vardır.

Basit versiyon

Öncelikle adlarla ilişkili bir kesme noktası haritasına ihtiyacınız var.

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

Ardından, mixin bu haritayı kullanacak.

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

Kullanım:

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

Sonuç:

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

Gelişmiş sürüm

Basit sürüm, yalnızca min-widthmedya sorgularının kullanılmasını mümkün kılar . Daha gelişmiş sorgular kullanmak için, ilk haritamızı değiştirebilir ve biraz karıştırabiliriz.

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

Kullanım:

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

Sonuç:

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