Javascript 将SCSS变量导出到JS（自动循环变量）

更新：如果您计划实施

导出

解决方案，您必须 将其放在一个单独的文件中，以防止在应用程序中重复导出 编译的CSS代码。看

我最近了解到，您可以将样式从SCS导出到JS，如下所示：

\u variables.scss

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

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

$theme-colors: (
  'someColor': #000,
  'anotherColor': #FFF,
);

:export {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

app.js

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

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

$theme-colors: (
  'someColor': #000,
  'anotherColor': #FFF,
);

:export {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

基于此，我的

\u variables.scs

的格式如下：

/* 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

中重新定义每个变量。因此，我很想知道是否有一种方法可以通过自动将我的每个变量导出到JS中来实现

循环

。

根据Bootstrap 4的提示，您可以将SASS映射与如下循环相结合

/*定义所有颜色*/
$主题颜色：(
一些颜色：#000，
另一种颜色：#000，
第三种颜色：#000，
第四种颜色：#000
)
@每个$color，$主题颜色中的$value{
：出口{
$color:$value；
}
}

您可以尝试在此处使用

SCSS映射

示例

$defalutColor:#000; // your default color
$colors: ( headingColor: #6446ff, preragraphColor: #1b1b1b, linkColor: #1dc506); //decleared color function
@function color($value:$defalutColor) {
    @if map-has-key($colors, $value) {
        @return map-get($colors, $value);
    }
    @return $defalutColor; //when not decleared color then the return default color
}

使用下面的命令在此处使用颜色功能

element {
    color: color(linkColor); //call the function for set color
//Or
    color: color(); // when blank call then the give function default color it's predefined
}

---

您可以在此处链接了解有关SCSS地图的信息：

对公认答案的一些改进：

• 使用camelcase可以单独导出变量

• 在外部设置

  @each

  指令，使其不会为每个变量生成新的

  ：export

  at规则

---

\u variables.scss

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

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

$theme-colors: (
  'someColor': #000,
  'anotherColor': #FFF,
);

:export {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

app.js

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

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

$theme-colors: (
  'someColor': #000,
  'anotherColor': #FFF,
);

:export {
  @each $key, $value in $theme-colors {
    #{unquote($key)}: $value;
  }
}

从“./core styles/brand/_variables.scss”导入样式“/{anotherColor:#FFF”，someColor:#000”}
从“./core styles/brand/_variables.scss'/#000”导入{someColor}

旁注：我更喜欢在Sass映射中使用引号，但您可以忽略它们

---

我想用这个，但我不太喜欢用地图来参考我所有的颜色。我会接受这个答案，因为我将发布同样的答案，因为我相当有信心这是实现它的唯一方法…谢谢@BenCarey-我已经编辑了我的答案，以包括一个循环，但不幸的是，它仍然依赖于地图。是的，我想不出任何其他方法：（需要什么样的加载程序设置才能使用

：export

？我很难在网上找到任何文档。@MaximoMussini-它被称为ICSS（可互操作的CSS），查看此链接：。网上还有其他各种文章，只需将可互操作的CSS放入谷歌即可：-这真的很有帮助。唯一有效的答案是！我不知道为什么，但由于某些原因，这似乎不再有效：（必须写：

@each$key，$value in$theme colors{{{{$key}:{{$value}）

ie.必须插入变量