如何通过Sass根据body类设置不同的媒体查询断点

一、基于Body类的SCSS方案 #

你可以通过SCSS Map存储站点断点配置+重构断点Mixin的方式，实现单样式表适配多站点断点，无需单独维护多个文件。

1. 定义站点断点配置Map

把每个站点的断点参数统一管理，方便后续修改和扩展：

$site-breakpoints: (
  site-alpha: (
    small: (min-h: 480px, min-w: 750px),
    medium: (min-h: 620px, min-w: 980px)
  ),
  site-beta: (
    small: (min-h: 580px, min-w: 820px),
    medium: (min-h: 720px, min-w: 1050px)
  ),
  // 新增站点直接在此添加即可
);

2. 重构Breakpoint Mixin

修改原有的breakpoint mixin，让它能根据传入的站点名称，自动匹配对应断点并生成带站点类的媒体查询：

@mixin breakpoint($site, $breakpoint) {
  // 从Map中提取当前站点的断点值
  $site-config: map-get($site-breakpoints, $site);
  $bp-values: map-get($site-config, $breakpoint);
  $min-height: map-get($bp-values, min-h);
  $min-width: map-get($bp-values, min-w);

  // 生成带站点类的媒体查询块
  .#{$site} {
    @media screen and (min-height: #{$min-height}) and (min-width: #{$min-width}) {
      @content;
    }
  }
}

3. 调用示例

在样式中直接传入站点名和断点类型即可：

// 为site-alpha的small断点设置容器样式
@include breakpoint(site-alpha, small) {
  .page-container {
    padding: 1.2rem;
    gap: 1rem;
  }
}

// 为site-beta的medium断点设置头部样式
@include breakpoint(site-beta, medium) {
  .site-header {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }
}

编译后的CSS会自动生成带站点类的媒体查询，比如：

.site-alpha @media screen and (min-height: 480px) and (min-width: 750px) {
  .page-container {
    padding: 1.2rem;
    gap: 1rem;
  }
}

二、替代方案：CSS变量驱动断点 #

如果不想依赖body类，也可以用CSS变量实现，每个站点通过body类覆盖默认变量即可：

1. 定义全局默认断点变量

:root {
  --bp-small-h: 480px;
  --bp-small-w: 750px;
  --bp-medium-h: 620px;
  --bp-medium-w: 980px;
}

2. 为各站点覆盖变量

.site-alpha {
  --bp-small-h: 580px;
  --bp-small-w: 820px;
}

.site-beta {
  --bp-medium-h: 720px;
  --bp-medium-w: 1050px;
}

3. 修改原Mixin使用CSS变量

@mixin breakpoint($breakpoint) {
  @if $breakpoint == small {
    @media screen and (min-height: var(--bp-small-h)) and (min-width: var(--bp-small-w)) {
      @content;
    }
  }
  @if $breakpoint == medium {
    @media screen and (min-height: var(--bp-medium-h)) and (min-width: var(--bp-medium-w)) {
      @content;
    }
  }
}

调用方式和你原来的完全一致：@include breakpoint(small) { ... }，无需额外传入站点名，断点会自动根据body类对应的变量值生效。

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