如何用Sass输出对应不同媒体查询的多个独立CSS文件？

完全可以做到，下面是具体的实现思路和代码示例：

核心思路 #

利用Sass的混合宏（Mixin）和条件编译，把移动端、桌面端的样式逻辑分离，再分别编译出两个目标CSS文件。

步骤1：定义环境变量与混合宏 #

先创建一个通用工具文件（比如_breakpoints.scss），用来管理断点和环境判断：

// 定义断点阈值
$mobile-breakpoint: 600px;

// 编译时切换的环境变量
$is-mobile: false;
$is-desktop: false;

// 移动端样式混合宏：编译移动端文件时直接输出样式，否则包裹媒体查询
@mixin mobile {
  @if $is-mobile {
    @content;
  } @else {
    @media (max-width: #{$mobile-breakpoint}) {
      @content;
    }
  }
}

// 桌面端样式混合宏：编译桌面端文件时直接输出样式，否则包裹媒体查询
@mixin desktop {
  @if $is-desktop {
    @content;
  } @else {
    @media (min-width: #{$mobile-breakpoint}) {
      @content;
    }
  }
}

步骤2：编写组件样式 #

在组件文件中使用上面的混合宏替代原生媒体查询：

@import 'breakpoints';

.my-component {
  display: block;

  @include mobile {
    width: 200px;
  }

  @include desktop {
    width: 400px;
  }
}

步骤3：创建两个入口文件分别编译 #

• 移动端入口文件（mobile.scss）：

$is-mobile: true;
$is-desktop: false;
@import 'breakpoints';
@import 'my-component';

编译后生成的mobile.css会直接输出移动端样式，无媒体查询包裹：

.my-component {
  display: block;
  width: 200px;
}

• 桌面端入口文件（desktop.scss）：

$is-desktop: true;
$is-mobile: false;
@import 'breakpoints';
@import 'my-component';

编译后生成的desktop.css会直接输出桌面端样式，无媒体查询包裹：

.my-component {
  display: block;
  width: 400px;
}

步骤4：按需引入CSS文件 #

在HTML中通过link标签的media属性，让浏览器根据屏幕尺寸按需加载：

<!-- 仅在屏幕宽度≤600px时加载移动端样式 -->
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

<!-- 仅在屏幕宽度≥600px时加载桌面端样式 -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 600px)">

这样既实现了样式拆分，又能让浏览器只加载当前设备所需的CSS文件，减少不必要的资源开销。

内容的提问来源于stack exchange，提问作者Seán Hayes