如何实现CSS变量与SCSS变量的加法运算

原写法是否可行 #

不可行。

原因很简单：SCSS变量是编译时变量，只在SCSS转CSS的预编译环节生效，编译完就会被替换成具体的固定值；而CSS原生变量是运行时变量，是浏览器渲染页面的时候才会读取的，预编译阶段SCSS根本拿不到--header-size的实际值，直接相加的写法既通不过编译，也拿不到预期结果。

解决方案 #

用CSS自带的calc()函数，配合SCSS的变量插值语法就可以实现，代码如下：

.gap {
  top: calc(var(--header-size) + #{$bar-size});
}

实现逻辑 #

1. 预编译阶段，SCSS会把#{$bar-size}替换成它对应的值20rem，编译完成后得到的原生CSS是：

.gap {
  top: calc(var(--header-size) + 20rem);
}

2. 浏览器渲染时，会自动获取当前--header-size的实际值（哪怕你在媒体查询断点里动态修改了这个值也能正常识别），通过calc()实时计算出最终的top值，完全符合你的需求。

注意点 #

• calc()里的加减运算符前后必须加空格，不然会被浏览器判定为无效语法
• 如果你的SCSS变量没有带单位，插值的时候需要自行补全，比如#{$bar-size}rem

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