当输入值“xs”时,我收到一个错误消息“(最大宽度:575.98px)不是一个有效的CSS值。”当输入任何其他值时,我会得到以下错误“This Breackpoint 'sm' is not supported yet”是否有可能将此想法应用于SASS?
$breakpoints: (
"xs": (max-width: 575.98px),
"sm": ((min-width: 576px) and (max-width: 767.98px)),
"md": ((min-width: 768px) and (max-width: 991.98px)),
"lg": ((min-width: 992px) and (max-width: 1199.98px)),
"xl": ((min-width: 1200px) and (max-width: 1399.98px)),
"xxl": (min-width: 1400px),
);
@mixin breakpoint($user-value) {
@each $size, $value in $breakpoints{
@if $user-value == $size {
@media #{$value} {
@content;
}
}@else {
@error "This Breackpoint '#{$user-value}' isn't supported yet";
}
}
};
body {
@include breakpoint(sm) {
background-color: blue;
}
}
我想尽量减少使用SASS混合编写的代码数量
1条答案
按热度按时间4ioopgfo1#
所以我想明白了,看看这个编辑过的代码: