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文件，“解析”它并回显javascript所需的值。

Answer 3

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

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

Answer 4

我建议查看使用原生sass功能的sass-extract，以便将计算出的变量值提取到JSON中。

此外，如果您使用webpack，sass-extract-loader将使{/ 1}}中的sass文件变得非常容易，并且将sass变量放在一个漂亮的JSON对象中。

由于它还支持const variables = require('sass-extract-loader!./variables.scss');语句，您仍然可以将变量分隔在不同的文件中，而无需使用变量添加其他预处理或单独的json文件。

如其他答案中所述，有许多其他方法可以实现此目的，您选择的方法取决于您的使用案例和环境。

免责声明，我是两个提到的图书馆的作者。

Answer 5

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

Answer 6

另一种方法是使用gulp-template，这样你就可以生成任何你想要的JavaScript结构。

使用gulp和gulp-template在Javascript和Sass之间共享变量 https://youtu.be/UVeUq8gMYco

它是从头开始创建的，所以人们可以从头开始看到它并且有一个git repo以及最终结果：

https://github.com/PocketNinjaCoUk/shared-js-sass-vars-using-gulp/tree/master/dev

你基本上有你的配置对象

保存在./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 %>;
  <% }) %>
<% }) %>

Javascript下划线模板

保存在./dev/templates/js-config.txt

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++ %>
  <% }); %>
  };
<% }) %>

然后gulp编译它

var gulp = require('gulp');
var template = require('gulp-template');
var rename = require('gulp-rename');
var removeEmptyLines  = require('gulp-remove-empty-lines');

var sharedVars = require('./dev/config');

gulp.task('compile', function() {
  gulp.src('./dev/templates/sass-config.txt')
    .pipe(template(sharedVars))
    .pipe(rename('_sass-config.scss'))
    .pipe(removeEmptyLines())
    .pipe(gulp.dest('./dev/sass'));

  gulp.src('./dev/templates/js-config.txt')
    .pipe(template(sharedVars))
    .pipe(rename('js-config.js'))
    .pipe(removeEmptyLines())
    .pipe(gulp.dest('./dev/js'));
});

Answer 7

可以使用gulp-sass-vars-to-js完成此操作。它会从.scss文件生成.js文件。 .js文件包含.scss文件中声明的所有变量。然后你可以要求＆＃39;这会将js生成到你的.js

中

Answer 8

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

config.js：

module.exports = {
     maxColumns: 4,
};

style.scss：

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

与sass-loader（Webpack）和node-sass一起使用。

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

8 个答案:

你基本上有你的配置对象

Sass下划线模板

Javascript下划线模板

然后gulp编译它