$breakpoints: (
sm: 0px,
md: 768px,
la: 1200px,
);
@mixin media-query($size) {
// map-get Sass 中的一个函数，用于从一个 Map（映射）中获取指定键对应的值
$min-width: map-get($breakpoints, $size);
$max-width: null;
@if $size =="sm" {
$max-width: map-get($breakpoints, "md");
}
@else if $size =="md" {
$max-width: map-get($breakpoints, "la");
}
@if $max-width ==null {
@media screen and (min-width: #{$min-width}) {
@content;
}
}
@else if $min-width ==0 {
@media screen and (max-width: #{$max-width}) {
@content;
}
}
@else {
@media screen and (min-width: #{$min-width}) and (max-width: #{$max-width - 1}) {
@content;
}
}
}
使用
.class{
//除了sm和md尺寸，其他的都使用这里的样式
@include media-query("sm") {
//中间写多个样式
padding: 3px 35px;
}
@include media-query("md") {
padding: 4px 35px;
}
}
