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

IT技术 javascript css sass
2021-02-26 19:00:28

我正在制作一个依赖于块概念的 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 的值，反之亦然？

6个回答

如果您使用 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/

这！这应该是公认的答案。我建议在导出时像:export { animationMillis: strip-unit($animation-length-ms);}使用strip-unit一样剥离单元，这样我们就可以直接将变量用作数字，而无需解析字符串。
2021-04-26 19:00:28
完美解决！
2021-05-07 19:00:28
在我的环境中不起作用，运行webpack@5.45.1,sass-loader@12.1.0和node-sass@6.0.1. 该变量styles被记录为undefined，因此我无法访问 中声明的变量:export。有任何想法吗？
2021-05-14 19:00:28

我认为我的解决方案非常古怪；但它确实有效...

在我的_base.scss我定义了一些变量：

$menu_bg: rgb(45, 45, 45);
$menu_hover: rgb(0, 0, 0);

在menu.scss我有：

@import "base";

#jquery_vars {
  .menu_bg {
    background-color: $menu_bg;
  }
  .menu_hover {
    background-color: $menu_hover;
  }
}

在一个方便的页面模板中：

<span class="is_hidden" id="jquery_vars">
  <span class="is_hidden menu_bg"></span>
  <span class="is_hidden menu_hover"></span>
</span>

最后，这允许在附近的 jQuery 脚本中：

var menu_bg = $('#jquery_vars .menu_bg').css("background-color");
var menu_hover = $('#jquery_vars .menu_hover').css("background-color");

这太丑了，我爸爸头上戴着一个包。

jQuery 可以从页面元素中提取任意 CSS 值；但这些元素必须存在。我确实尝试从原始 CSS 中提取其中一些值而不在 HTML 和 jQuery 中创建跨度undefined。显然，如果将这些变量分配给页面上的“真实”对象，则您实际上并不需要任意#jquery_vars元素。同时，人们可能会忘记这.sidebar-left nice-menu li是用于向 jQuery 提供变量的重要元素。

如果有人有其他东西，它必须比这更干净......

您可以使用服务器端脚本读取 sass 文件，“解析”它并将您需要的值回显到 javascript。

sass-ffi应该可以解决问题，但方式相反（从 JS 到 SASS/SCSS）。它将定义一个名为 的函数ffi-require，它允许您require从 SASS获取.js 文件：

config.js：

module.exports = {
     maxColumns: 4,
};

style.scss：

$max-columns: ffi-require('./config', 'maxColumns');

与sass-loader(webpack) 和node-sass.

我想补充一点，现在有几种方法可以使用 JSON 在 Sass 和 JavaScript 之间共享数据。以下是详细介绍各种技术的文章的一些链接：

Sass 原生支持 JSON 导入可能只是时间问题。

其它你可能感兴趣的问题
上一篇是否可以反向播放 HTML5 视频？ 下一篇获取元素的比例值？