Mixin để quản lý các điểm ngắt - Thủ thuật CSS

Các sáng tạo Thiết kế web đáp ứng thường tồn tại qua một số điểm ngắt khác nhau. Quản lý các điểm ngắt đó không phải lúc nào cũng dễ dàng. Sử dụng chúng và cập nhật chúng đôi khi có thể tẻ nhạt. Do đó, nhu cầu về một mixin để xử lý cấu hình và sử dụng điểm ngắt.

Phiên bản đơn giản

Đầu tiên, bạn cần một bản đồ các điểm ngắt, được liên kết với tên.

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

Sau đó, mixin sẽ sử dụng bản đồ này.

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

Sử dụng:

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

Kết quả:

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

Phiên bản nâng cao

Phiên bản đơn giản chỉ giúp bạn có thể sử dụng min-widthcác truy vấn phương tiện. Để sử dụng các truy vấn nâng cao hơn, chúng tôi có thể chỉnh sửa bản đồ ban đầu và kết hợp một chút.

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

Sử dụng:

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

Kết quả:

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