将 SCSS 变量导出到 JS(自动循环变量) [英] Exporting SCSS Variables to JS (auto looping variables)

问题描述

更新:如果您计划实施export 解决方案，您必须将它放在一个单独的文件中，以防止在您的编译的 CSS 代码.请参阅此处.

UPDATE: If you plan to implement the export solution, you must place it in a separate file to prevent redundant exports in your compiled CSS code. See here.

我最近了解到您可以像这样将样式从 SCSS 导出到 JS:

I recently learned that you can export styles from SCSS into JS like so:

_variables.scss

:export {
    some-variable: 'some-value';
}

app.js

import styles from 'core-styles/brand/_variables.scss';

基于此，我的 _variables.scss 格式如下:

Based on this, my _variables.scss is formatted like so:

/* Define all colours */
$some-color:       #000;
$another-color:    #000;

// Export the color palette to make it accessible to JS
:export {
    some-color: $some-color;
    another-color: $another-color;
}

上述格式的问题是我必须在 export 中重新定义我的每个变量.因此，我很想知道是否有一种方法可以通过我的每个变量自动 loop 并将它们导出到 JS?

The issue with the above format is that I have to re-define each of my variables within export. Therefore, I am interested to know whether there is a way to loop though each of my variables automatically and export them to JS?

推荐答案

从 Bootstrap 4 中获取提示，您可以将 SASS 映射与如下所示的循环结合起来；

Taking a Cue from Bootstrap 4, you could combine a SASS map with a loop like below;

/* Define all colours */
$theme-colours: (
  some-color: #000,
  another-color: #000,
  third-color: #000,
  fourth-color: #000
)

@each $color, $value in $theme-colours {
  :export{
    $color: $value;
  }
}

以下是 Bootstrap 4 文档

这篇关于将 SCSS 变量导出到 JS(自动循环变量)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！