1. 什么是CSS变量
CSS变量，也被称为自定义属性（custom properties），是由CSS定义的，可被用作值的占位符。使用CSS变量可以在整个样式表中使用同一值，实现样式的统一管理和灵活控制。
2. CSS变量与SCSS
SCSS（Sass CSS）是Sass预处理器的一种语法扩展。它提供了更强大的功能，比如嵌套、变量等。而CSS变量也可以与SCSS一起使用，以实现在运行时改变SCSS变量值的效果。
2.1 定义SCSS变量
在SCSS中，我们可以使用$符号定义变量。例如：
$temperature: 0.6;这里我们定义了一个温度变量$temperature，初始值为0.6。
2.2 使用CSS变量
在SCSS中，我们可以使用CSS变量作为样式的值。例如：
div {
background-color: hsla(120, 100%, 50%, $temperature);
}
这里我们使用了$temperature作为背景颜色的透明度值，实现了根据温度改变背景颜色的效果。
3. 使用var()函数实现运行时改变CSS变量值
在CSS3中，引入了var()函数，它可以在运行时获取CSS变量的值。我们可以使用var()函数来实现运行时改变SCSS变量值的效果。
3.1 定义CSS变量
首先，我们需要定义CSS变量。在CSS中，我们使用--前缀定义变量。例如：
:root {
--temperature: 0.6;
}
这里我们在:root伪类中定义了一个温度变量--temperature，初始值为0.6。
3.2 使用var()函数
在SCSS中，我们可以使用var()函数来引用CSS变量。例如：
div {
background-color: hsla(120, 100%, 50%, var(--temperature));
}
这里我们使用var()函数来引用--temperature变量，实现了与先前相同的效果。
3.3 运行时改变变量值
通过JavaScript，我们可以在运行时改变CSS变量的值，从而实现动态改变样式效果。
document.documentElement.style.setProperty('--temperature', '0.8');这里我们使用document.documentElement.style.setProperty方法来改变--temperature变量的值为0.8。
通过这样的方式，我们可以根据实际需求在运行时动态改变SCSS变量的值，从而实现样式的灵活调整。
4. 总结
CSS变量和SCSS的结合使用，可以实现样式的统一管理和灵活控制。而使用var()函数可以在运行时改变CSS变量的值，从而实现样式的动态调整。
通过以上的介绍，我们了解了如何利用CSS3的var()函数实现运行时改变SCSS变量值的方法，希望对您有所帮助。