SASS中如何在自定义变量中使用全局CSS自定义属性？

核心问题在于Sass变量是编译时生效，而CSS自定义属性（var()）是浏览器运行时生效——编译Sass的时候，var(--mobile)还没有实际值，自然没法填充到$breakpoints这个Sass映射里。

正确的复用方式：先定义Sass变量，再导出为CSS自定义属性 #

反过来操作，先在Sass层面统一管理变量，再把它们同步到CSS自定义属性，这样两边都能复用：

1. 在_breakpoints-variables.scss中先定义Sass变量，再生成CSS自定义属性：

// 先定义Sass变量，作为单一数据源
$mobile: 30em;
$tablet: 64em;
$sm-screen: 82em;
$m-screen: 120em;
$l-screen: 140em;
$xl-screen: 160em;

// 将Sass变量导出为CSS自定义属性
:root {
    --mobile: #{$mobile};
    --tablet: #{$tablet};
    --sm-screen: #{$sm-screen};
    --m-screen: #{$m-screen};
    --l-screen: #{$l-screen};
    --xl-screen: #{$xl-screen};
}

2. 在_breakpoints.scss中直接使用这些Sass变量构建映射：

$breakpoints: (
    "mobile": $mobile,
    "tablet": $tablet,
    "sm-screen": $sm-screen,
    "m-screen": $m-screen,
    "l-screen": $l-screen,
    "xl-screen": $xl-screen,
) !default;

为什么之前的方法行不通？ #

• Sass在编译阶段会把所有变量、映射替换成具体值，这时候浏览器还没解析CSS，var(--mobile)对Sass来说只是一串字符串，不是有效的数值。
• 反过来用Sass变量生成CSS自定义属性，既能在Sass代码里复用变量，也能在原生CSS里用var()调用，实现双向复用。

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