如何基于根元素ID动态调整Sass函数或生成多模式样式？

问题背景 #

应用存在三种显示模式（不受缩放和像素数量影响）：

• 16x9（默认）
• 占1/4屏幕的16x9（宽高为原1/2）
• 9x16
  模式通过外部API设置在根节点的ID属性上。现有Sass辅助函数ru用于计算默认16x9模式的相对单位，但无法根据根节点ID动态调整计算逻辑。希望在预编译阶段完成计算，避免使用CSS变量带来的精度丢失和性能顾虑，同时实现期望的多模式样式输出。

能否编写依赖根ID的预编译Sass函数？ #

不行。Sass是预编译语言，编译阶段无法感知运行时的DOM元素ID状态。你尝试在#mode2选择器内重新定义$width变量的方式无效——函数ru是全局作用域，编译时只会使用全局的$width值，选择器内的局部变量无法影响函数的计算逻辑。

使用Mixin实现多模式样式输出 #

这是完全可行的方案，通过定义模式配置和复用Mixin，能在预编译阶段生成所有模式的样式，既保留round函数的精度，又避免运行时calc的性能问题。

步骤1：定义模式配置与通用ru函数

先把所有模式的基准宽度集中配置，同时让ru函数支持传入自定义基准宽度：

// 三种显示模式的基准宽度配置
$display-modes: (
  default: 1920,
  mode2: 3840,
  mode3: 1080
);

// 通用ru函数，支持自定义基准宽度
@function ru($value, $base-width: 1920) {
  $value-unitless: $value / 1px; // 去除px单位转为数值
  $target: $value-unitless / $base-width * 10000;
  @return calc(round($target) / 100 * 1vw);
}

步骤2：编写核心Mixin生成多模式样式

这个Mixin会自动遍历所有模式，生成默认样式和带根ID前缀的样式：

@mixin responsive-mode($styles) {
  // 生成默认模式的样式
  @include $styles(map-get($display-modes, default));

  // 遍历其他模式，生成带ID前缀的样式
  @each $mode-name, $base-width in map-remove($display-modes, default) {
    ##{$mode-name} {
      @include $styles($base-width);
    }
  }
}

步骤3：使用Mixin编写样式

按照你期望的简洁语法编写样式，Mixin会自动生成三种模式的代码：

@include responsive-mode(
  @mixin($base-width) {
    .container {
      width: ru(200px, $base-width);
      // 其他样式示例
      padding: ru(20px, $base-width);
      font-size: ru(16px, $base-width);
    }
  }
);

编译后的输出

完全符合你期望的结果：

.container {
  width: 10vw;
  padding: 1vw;
  font-size: 0.83vw;
}

#mode2 .container {
  width: 5vw;
  padding: 0.5vw;
  font-size: 0.42vw;
}

#mode3 .container {
  width: 17.78vw;
  padding: 1.85vw;
  font-size: 1.48vw;
}

方案优势 #

• 预编译完成所有计算，保留round函数的精度，无运行时calc性能损耗
• 模式配置集中管理，新增或修改模式只需调整$display-modes变量
• 模块化开发友好，只需在需要的文件中导入辅助文件即可使用

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