有没有办法将变量从 javascript 导入到 sass 或反之亦然？

我正在制作一个依赖于块概念的 CSS 网格系统。所以我有一个基本文件，例如：

$max-columns: 4;
$block-width: 220px;
$block-height: 150px;
$block-margin: 10px;

它被 mixin 使用：

@mixin block ($rows, $columns, $max-columns) {
  display: block;
  float: left;
  margin: $block-margin 0 0 $block-margin;
  box-sizing: border-box;
  width: ($block-width * $columns) - $block-margin;
}

但我还希望 javascript 能够访问基本文件中的变量。我想我可以制作一个不可见的 div，并为其赋予 $block-width、$block-height 和 $block-margin 属性，并从那里提取值。但是 max-columns 不会直接映射到任何内容，因此我必须想出一种巧妙的方法来将其呈现在 div 中。是否有更干净的方法来共享从 sass/css 到 javascript 的值，反之亦然？

如果您使用 webpack，您可以使用 sass-loader 导出变量，例如：

$animation-length-ms: $animation-length + 0ms;

:export {
  animationMillis: $animation-length-ms;
}

并像这样导入它们

import styles from '../styles/animation.scss'    
const millis = parseInt(styles.animationMillis)

https://blog.bluematador.com/posts/how-to-share-variables- Between-js-and-sass/ https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/