在js中添加多个style样式并且使用scss变量

可以使用JavaScript中的`style`属性来添加多个样式，同时也可以使用SCSS变量。以下是一个示例代码：

const element = document.getElementById('my-element');

const primaryColor = '#ff0000';
const secondaryColor = '#00ff00';

element.style.color = primaryColor;
element.style.backgroundColor = secondaryColor;
element.style.padding = '10px';

element.style.setProperty('--primary-color', primaryColor);
element.style.setProperty('--secondary-color', secondaryColor);

在上面的代码中，我们首先获取了一个ID为`my-element`的元素，然后定义了两个颜色变量`primaryColor`和`secondaryColor`，并将它们分别设置为元素的`color`和`backgroundColor`属性。我们还添加了一个`padding`样式。

接下来，我们使用`setProperty`方法将SCSS变量`--primary-color`和`--secondary-color`分别设置为`primaryColor`和`secondaryColor`的值。这将允许我们在元素的样式表中使用这些变量，例如：

#my-element {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

这样，我们就能够使用JavaScript动态地添加多个样式，并且使用SCSS变量来保持样式的可维护性和可重用性。