javascript - 从js代码将整数变量分配给css

Question

我想更改history-lengthjs 代码中的变量并在以下 js 代码中使用它。我怎样才能做到这一点？

$history-length: 15;

@for $i from 0 through 3 {
  @for $j from 1 through $history-length {
    g:nth-child(#{$i*$history-length + $j}) > circle {
      fill: nth($colors, $i+1);
      stroke: nth($colors, $i+1);
    }
  }
}

首先我尝试在 js 代码中这样操作--history-length变量，但似乎我只能分配整数并在 css 代码中使用它。

    document.documentElement.style.setProperty(`--history-length`, 15)

接下来我做的是从 css 代码中导出变量并在 js 代码中导入并更改它。但它并没有改变 css 代码中的变量。

:export {
  historyLength: $history-length;
}

我还能尝试什么？

标签： javascriptcsssass