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

JavaScript CSS

樱小胖Mandy

2020-03-23

我正在制作一个依赖于块概念的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不能直接映射到任何东西，因此我不得不想出一种hacky的方法来将它渲染到div中。有没有一种更干净的方法可以将值从sass / css共享到javascript，反之亦然？

第2923篇《有没有办法将变量从javascript导入到sass，反之亦然？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
小胖Gil 2020.03.23

这可以使用gulp-sass-vars-to-js完成。它从您的.scss文件生成一个.js文件。.js文件包含在.scss文件中声明的所有变量。然后，您可以将“生成的js”“要求”到您的.js中

老丝阿飞 2020.03.23

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

在Sass中本地支持JSON导入可能只是时间问题。

西门乐 2020.03.23

您可以使用服务器端脚本读取sass文件，对其进行“解析”，然后将需要的值回显为javascript。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android