是否可以将JavaScript值传递给SCSS?

Question

像这样

<script>
data() {
return {
themeColor: " #ffffff",
}
},
</script>
<style lang="scss" scoped>
$importedColor: themeColor  // javascipt variable

.btn {
background: $importedColor;
}
.squre {
border: 1px solid $importedColor;
}
</style>

无论哪种方式，我都希望能够在JavaScript中选择主题颜色。

有可能吗?

Answer 1

如果你创建一个指向CSS变量的Sass变量，然后用JavaScript设置它是可能的:

SCSS:

:root {
--my-custom-color: brown;
}
$importedColor: var(--my-custom-color);
body {
background-color: $importedColor;
}

JS:

function setBackgroundColor(color) {
document.documentElement.style.setProperty('--my-custom-color', color);
}

我还没有测试上面显示的特定代码，但我在项目中做过同样的事情，并且工作得很好。

Answer 2

我不确定，但我读到这是可能的Vue 3，它仍然是实验性的。

你可以这样做:

<template>
<div class="text">Hello</div>
</template>
<script>
export default{
data(){
return{
color: "red"
}
}
}
</script>
<style vars="{ color }">
.text {
color: var(--color);
}
</style>