SCSS中Lighten/Darken函数编译未生效问题求助

问题出在SCSS编译时的处理逻辑：CSS自定义属性（--xxx）的值会被SCSS当作纯字符串内容，不会主动解析其中的SCSS函数调用。你直接把lighten()/darken()写在CSS变量的插值里，SCSS只会替换掉变量部分，保留函数表达式本身——因为它默认认为这是给浏览器运行时解析的内容，而非需要编译计算的SCSS代码。

两种解决方法 #

方法1：提前用SCSS变量计算颜色值

先通过SCSS变量预计算出亮色、暗色的最终值，再将结果插值到CSS变量中：

// 在layout.scss里先计算颜色值
$primary-light: lighten($primary, $change);
$primary-dark: darken($primary, $change);

:root {
    --primary: #{$primary};
    --primary-light: #{$primary-light};
    --primary-dark: #{$primary-dark};
}

方法2：嵌套插值强制SCSS解析函数

直接在插值语法里包裹函数调用，强制SCSS先执行计算再输出结果：

:root {
    --primary: #{$primary};
    --primary-light: #{lighten($primary, $change)};
    --primary-dark: #{darken($primary, $change)};
}

两种方法编译后都会输出正确的HEX值，比如：

:root {
    --primary: #1e4f9c;
    --primary-light: #4a73c2;
    --primary-dark: #002a66;
}

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