Mixin untuk Menguruskan Breakpoints - Trik CSS

Penciptaan Reka Bentuk Web Responsif sering wujud di beberapa titik putus yang berbeza. Menguruskan titik putus tidak selalu mudah. Menggunakannya dan mengemas kini kadangkala membosankan. Oleh itu perlunya mixin untuk menangani konfigurasi dan penggunaan breakpoint.

Versi ringkas

Mula-mula anda memerlukan peta titik putus, yang dikaitkan 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))."; ) )

Penggunaan:

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

Keputusan:

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

Versi lanjutan

Versi mudah hanya memungkinkan untuk menggunakan min-widthpertanyaan media. Untuk menggunakan pertanyaan yang lebih maju, kami dapat mengubah peta awal kami dan menggabungkan sedikit.

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

Penggunaan:

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

Keputusan:

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