有没有办法将变量从javascript导入sass，反之亦然？-Java 学习之路

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

7 回答

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

回复于 2024-05-02T23:50:35+08:00

5

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

回复于 2024-05-02T23:50:35+08:00
10
我认为我的解决方案非常好;但它确实有效......

在我的 _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;
 }
}
```
并在一个方便的页面模板中：
```

 
 

```
最后，这允许在附近的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中创建 Span ，jQuery想出了 undefined . 显然，如果将这些变量分配给页面上的"real"对象，则实际上并不需要任意 #jquery_vars 元素 . 与此同时，人们可能会忘记 .sidebar-left nice-menu li 是用于向jQuery提供变量的重要元素 .

如果有人有别的东西，它必须比这更干净......
回复于 2024-05-02T23:50:35+08:00
4
我想补充一点，现在有几种方法可以使用JSON在Sass和JavaScript之间共享数据 . 以下是一些文章的链接，详细介绍了各种技术：
在Sass中本地支持JSON导入可能只是时间问题 .
回复于 2024-05-02T23:50:35+08:00
4

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

此外，如果您使用webpack，sass-extract-loader将使得只需要/导入sass文件就像在 const variables = require('sass-extract-loader!./variables.scss'); 中一样，并将您的sass变量放在一个漂亮的JSON对象中 .

由于它还支持 @import 语句，您仍然可以将变量分隔在不同的文件中，而无需使用变量添加其他预处理或单独的json文件 .

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

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

回复于 2024-05-02T23:50:35+08:00

另一种方法是使用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'));
});