有没有办法将变量从javascript导入到sass，或者从sass导入到javascript？

我正在制作一个css网格系统，它依赖于块的概念。因此，我有一个基本文件，如：

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

它被一个混合器使用：

@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的值，或者反过来呢？

您可以使用服务器端脚本“parse”读取sass文件它将你需要的值与JavaScript相呼应。

< P>我认为我的解决方案相当愚蠢。但它确实有效

在my

\u base.scss

中，我定义了一些变量：

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

在

菜单中.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可以从页面元素中提取任意CSS值；但这些因素必须存在。我确实尝试过从原始CSS中提取一些值，但没有在HTML中创建跨距，jQuery得到了

undefined

。显然，如果将这些变量分配给页面上的“真实”对象，则实际上不需要任意的

\jquery\u vars

元素。同时，人们可能会忘记，

.sidebar left nice menu li

是用于向jQuery提供变量的关键元素

---

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

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

---

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

另一种方法可能是使用gulp模板，以便为JavaScript生成所需的任何结构

使用Gulp和Gulp模板在Javascript和Sass之间共享变量

它是从零开始创建的，因此人们可以从头看到它，并有一个git回购协议，最终结果是：

您基本上拥有配置对象 保存在./dev/config.js

module.exports = {
  defaults: {
    colours: {
      primary: '#fc0'
    },
    sizes: {
      small: '100px',
      medium: '500px',
      large: '1000px'
    },
    zIndex: {
      model: 100,
      dropdown: 50,
      header: 10
    }
  }
}

然后您就有了Sass和Javascript的两个模板，或者更少，或者任何您想要的模板

Sass下划线模板 保存在./dev/templates/sass-config.txt

<% _.each(defaults, function(category, key) { %>
  // Var <%= key %>
  <% _.each(category, function(value, key) { %>
    $<%= key %>: <%= value %>;
  <% }) %>
<% }) %>

namespace.config = {};

<% _.each(defaults, function(monkey, key) { %>
  namespace.config.<%= key %> = {
  <% i = 1 %>
  <% _.each(monkey, function(value, key) { %>
    <% comma = (Object.keys(monkey).length === i) ? '': ',' %>
    <% if(typeof value === 'string') {%>
      <%= key %>: '<%= value %>'<%= comma %>
    <%} else { %>
      <%= key %> : <%= value %><%= comma %>
    <% } %>
    <% i++ %>
  <% }); %>
  };
<% }) %>

---

为了将计算出的变量值提取到JSON中，我建议查看哪些使用本机sass特性

此外，如果您使用的是Web包，则只需按照

const variables=require（'sass-extract-loader！/variables.scss'）中的要求/导入sass文件就非常容易了并将sass变量放入一个漂亮的JSON对象中

由于它还支持
@import
语句，您仍然可以在不同的文件中分离变量，并且无需添加额外的预处理或使用变量分离json文件

如其他答案中所述，有许多替代方法可以实现这一点，您选择哪种方法取决于您的用例和环境

免责声明，我是上述两个库的作者。
如果您使用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)

这可以通过使用。它从.scss文件生成一个.js文件。.js文件包含在.scss文件中声明的所有变量。然后，您可以将生成的js“要求”到您的中。js应该可以做到这一点，但方法正好相反（从js到SASS/SCSS）。它将定义一个名为
ffi require
的函数，该函数允许您
require
.js文件来自SASS：

config.js
：

module.exports={
maxColumns:4，
};

style.scss
：

$max columns:ffi require（'./config'，maxColumns'）；

与
sass加载程序
（网页包）和
节点sass
配合使用！这应该是公认的答案。我建议在导出时使用

：export{animationMillis:strip unit（$animation length ms）；}，这样我们就可以直接使用变量作为数字，而无需解析字符串。完美的解决方案！

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

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

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