Mixin untuk Mengelola Breakpoints - Trik CSS

Kreasi Desain Web Responsif sering kali ada di beberapa breakpoint yang berbeda. Mengelola breakpoint tersebut tidak selalu mudah. Menggunakannya dan memperbaruinya terkadang bisa membosankan. Oleh karena itu kebutuhan akan mixin untuk menangani konfigurasi dan penggunaan breakpoint.

Versi sederhana

Pertama, Anda memerlukan peta breakpoint, yang terkait dengan nama.

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

Kemudian, mixin akan menggunakan peta ini.

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

Pemakaian:

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

Hasil:

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

Versi lanjutan

Versi sederhana hanya memungkinkan untuk menggunakan min-widthkueri media. Untuk menggunakan kueri yang lebih canggih, kita dapat mengubah peta awal kita dan sedikit mencampurnya.

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

Pemakaian:

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

Hasil:

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