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

Question

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

Answer 1

我认为我的解决方案非常好; 但它确实有效......

在我的_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的重要元素.

如果有人有别的东西,它必须比这更干净......

Answer 2

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.

Answer 3

您可以使用服务器端脚本读取sass文件,"解析"它并回显javascript所需的值.

Answer 4

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