将数据传递到SCSS/SASS并更新DOM

Question

所以Sass有一些非常好的函数可以在css中创建复杂的逻辑。如果你能真正传递来自React或Svelte等前端框架的数据，并将其传递给你的SCSS并进行更新，那就太好了。一个概念性的例子：

第.tsx页

onClick={setColor(element.Color = 'blue')}

style.scss

element {
color: $element.Color: 
}

我确信在目前阶段这是不可能的，因为SCSS只是被编译成CSS。但有人知道有什么新的创新或框架在探索这一点吗？或者一些接近这种体验的模式(不包括JS框架中的CSS(？

Answer 1

CSS变量可以在运行时更改，这与它们的SCSS对应变量不同。但您可以在SCSS中同时使用这两种功能。前者只在运行时保存任何有意义的值，不能用作任何SASS函数的输入。如果您需要对这些值执行超出calc()所能执行的任何逻辑，则必须在运行时使用javascript函数。

下面是一个示例，展示了如何在运行时将用户提供的值传播到CSS中以影响样式规则：

const input = document.getElementById('input');
const container = document.querySelector('.container');
const onChange = (e) => {
container.style.setProperty('--items-per-line', e.target.value);
};
input.addEventListener('input', onChange);

.container {
--items-per-line: 4;
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-right: calc(100% - (var(--items-per-line) * (20px + 10px)));
}
.item {
background: #ddd;
height: 20px;
width: 20px;
}

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<label>
desired items per line
<input id="input" />
</label>

因此，可以使用SCSS和CSS变量的组合：

$items-per-line: 4;
$item-size: 20px;
$gap-size: 10px;
.container {
--items-per-line: #{$items-per-line};
display: flex;
flex-wrap: wrap;
gap: $gap-size;
padding-right: calc(100% - (var(--items-per-line) * #{$item-size + $gap-size}));
}
.item {
background: #ddd;
height: $item-size;
width: $item-size;
}

Answer 2

我会制作一个scss函数或类，比如"；文本蓝色"；并在JS中使用。JS并不是用来控制样式的，这就是css的作用。