如何在Sass中基于两个变量的比值实现数值缩放计算

实现方案说明 #

math.div是Dart Sass 1.33.0及以上版本才支持的内置方法，使用前需要先导入sass:math模块，根据你的使用场景可以选择以下两种实现方式：

场景1：所有变量都是编译时固定值，无需浏览器动态计算

直接用Sass原生计算即可，不需要套calc，代码示例：

// 顶部先导入math模块
@use "sass:math";

$w: 500px;
$a: 1px;
$b: 2px;
// 编译时直接计算得到结果 250px
$result: $w * math.div($a, $b);

场景2：需要保留CSS calc做运行时计算（比如涉及CSS变量、视窗单位等动态值）

你之前的写法错误原因是直接把Sass专属的math.div方法写在了calc字符串内部，Sass不会解析calc内部的方法，浏览器也不认识math.div语法。需要先在Sass上下文完成除法计算，再将结果插值到calc表达式中：

@use "sass:math";

$w: 500px;
$a: 1px;
$b: 2px;
// 先在Sass侧计算出比值
$ratio: math.div($a, $b);
// 再把比值插值到calc中
$result: calc(#{$w} * #{$ratio});

上述代码编译后会生成calc(500px * 0.5)，和你最初的实现效果完全一致。

兼容旧版本Sass的方案

如果你用的Sass版本不支持math.div，也可以用旧版的除法语法，注意给除法运算套括号避免被识别为值分隔符：

$w: 500px;
$a: 1px;
$b: 2px;
$result: $w * ($a / $b);
// 需要保留calc的写法同理：
$result: calc(#{$w} * #{$a / $b});

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