使用断点，在 Sass 中使用 Mixin 或占位符

Question

我正在使用 Mixin 作为这样的断点

$breakpoints: ( 'tiny': ( max-width: 480px ), 'small': ( max-width: 767px ), 'medium': ( max-width: 992px ), 'large': ( max-width: 1199px ) ); // Creating the mixin

在 SCSS 中，我打电话像

@include breakpoint(small) {
}

我的观点是，我在许多位置调用此mixin，因此css的大小会增加。

这是在 SASS 中使用断点的最佳方式enter code here

Answer 1

Chek 这个断点混合。

@mixin respond-to($breakpoint) {
@if $breakpoint == "mobile-small" {
@media (min-width: 320px) {
@content;
}
}
@else if $breakpoint == "mobile-big" {
@media (min-width: 640px) {
@content;
}
}
@else if $breakpoint == "small" {
@media (min-width: 768px) {
@content;
}
}
@else if $breakpoint == "medium" {
@media (min-width: 1025px) {
@content;
}
}
@else if $breakpoint == "large" {
@media (min-width: 1200px) {
@content;
}
}
@else if $breakpoint == "ex-large" {
@media (min-width: 1920px) {
@content;
}
}
}

并像这样称呼混合。

.wrapper {
width: 100%;
padding: 0 15px;
@include respond-to(small) {
width: 750px;
margin: 0 auto;
}
@include respond-to(medium) {
width: 980px;
padding: 0 15px;
}
@include respond-to(large) {
width: 1140px;
}
@include respond-to(ex-large) {
width: 1600px;
}
}

Answer 2

希望这有帮助。这始终是移动优先的，并且可以轻松管理任何和所有断点。

$breakpoints: (
"watch":        0,
"phone-small":      320px,
"phone-mid":        480px,
"phone":            560px,
"tablet-small":     640px,
"tablet-mid":       768px,
"tablet":           1024px,
"desktop":          1248px,
"desktop-large":    1440px,
"desktop-xlarge":   2060px
);
@mixin screen-size($width, $type: min) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
@if $type == max {
$width: $width - 1px;
}
@media only screen and (#{$type}-width: $width) {
@content;
}
}
}

希望你喜欢它。

用法如下所示

@include screen-size('tablet-small') {
/* your css */
}