Sass能否基于媒体查询条件按需加载Mixin？

嘿，这个问题我之前踩过坑！你写的@if @media (min-width: 768px) {...}这种写法其实走不通，因为Sass的@if是编译时的逻辑，它根本没法识别浏览器运行时的媒体查询条件，这么写大概率会直接报错，达不到你想要的效果。下面给你两种可行的实现思路，看你需求选：

1. 响应式动态切换（同一个CSS文件实现） #

这是最常用的响应式场景方案：直接用媒体查询包裹mixin的调用，编译后的CSS会包含两个媒体查询块，浏览器会根据当前视口宽度自动选择生效的样式（不符合条件的mixin代码会存在于CSS中，但不会被浏览器应用）。

示例代码：

// 定义你的mixin
@mixin mixin1 {
  /* 桌面端样式 */
  .container {
    width: 1170px;
    margin: 0 auto;
  }
}

@mixin mixin2 {
  /* 移动端样式 */
  .container {
    width: 90%;
    padding: 0 10px;
  }
}

// 根据媒体查询调用对应mixin
@media (min-width: 768px) {
  @include mixin1;
}

// 注意用max-width:767.98px避免和min-width:768px的临界值冲突
@media (max-width: 767.98px) {
  @include mixin2;
}

这种方式的好处是一个CSS文件就能适配所有屏幕尺寸，浏览器只会渲染符合当前视口的样式，完全满足你“仅加载对应mixin”的实际效果。

2. 编译时静态生成（仅输出对应mixin的代码） #

如果你的需求是完全让不符合条件的mixin代码不出现在最终的CSS文件里（比如要单独生成桌面/移动端CSS），那可以用Sass变量配合@if判断，在编译前指定目标屏幕：

示例代码：

// 编译前设置目标屏幕：desktop 或 mobile
$target-screen: desktop;

@mixin mixin1 {
  /* 桌面端样式 */
  .container {
    width: 1170px;
    margin: 0 auto;
  }
}

@mixin mixin2 {
  /* 移动端样式 */
  .container {
    width: 90%;
    padding: 0 10px;
  }
}

// 根据变量判断调用哪个mixin
@if $target-screen == desktop {
  @include mixin1;
} @else {
  @include mixin2;
}

这种方式需要你在编译时切换$target-screen的值，分别生成桌面版和移动端的CSS文件，适合需要分离不同设备样式文件的场景。

内容的提问来源于stack exchange，提问作者d-cmst