如何使用Sass变量实现CSS媒体查询的宽度区间补集？

嘿，这个问题其实很好搞定，核心就是把反区间的逻辑用Sass变量拆解清楚就行！

首先理清楚变量对应关系：

• 你原本的目标区间下限是 $vertical-view-max + 1，那反区间的第一个条件就是小于等于$vertical-view-max，也就是 max-width: $vertical-view-max
• 原本的目标区间上限是 $medium-view-max，那反区间的第二个条件就是大于等于$medium-view-max + 1，也就是 min-width: $medium-view-max + 1

接下来直接把这两个条件用逗号分隔（表示逻辑或），用Sass变量拼接起来就可以，完全不用硬编码数值：

// 先定义你的基础变量
$vertical-view-max: 768px;
$medium-view-max: 1280px;

// 反区间媒体查询
@media (max-width: #{$vertical-view-max}), (min-width: #{$medium-view-max + 1}) {
  // 这里写你需要的样式
  .example-element {
    background-color: #f5f5f5;
  }
}

编译后的CSS会自动变成你验证过的正确硬编码版本：

@media (max-width: 768px), (min-width: 1281px) {
  .example-element {
    background-color: #f5f5f5;
  }
}

如果想让代码更优雅、方便重复使用，还可以把这个反区间媒体查询封装成混合宏（mixin）：

@mixin not-in-medium-view {
  @media (max-width: #{$vertical-view-max}), (min-width: #{$medium-view-max + 1}) {
    @content;
  }
}

// 使用时直接调用
.example-element {
  @include not-in-medium-view {
    background-color: #f5f5f5;
  }
}

这样后续不管你怎么调整$vertical-view-max和$medium-view-max的数值，反区间的媒体查询都会自动同步更新，完全不用手动修改啦！

内容的提问来源于stack exchange，提问作者user1738984