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

Posted 2023-03-07

【中文标题】将 SCSS 变量导出到 JS（自动循环变量）

【英文标题】：Exporting SCSS Variables to JS (auto looping variables)

【发布时间】：2019-10-24 16:48:31

【问题描述】：

更新：如果您计划实施export 解决方案，您必须 将它放在一个单独的文件中，以防止在您的 编译的 CSS 代码。见here。

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

_variables.scss

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

app.js

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

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

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

【问题讨论】：

需要什么样的加载器设置才能使用:export？我很难在网上找到任何文档。

@MaximoMussini - 它被称为 ICSS（可互操作 CSS），请查看此链接：glenmaddern.com/articles/interoperable-css。网上也有各种其他的文章，把interoperable CSS放到Google里就行了：-D

【参考方案1】：

对已接受答案的一些改进：

使用 camelcase，以便您能够单独导出变量。

在外部设置@each 指令，这样它就不会为每个变量生成新的:export at-rule。

---

_variables.scss

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

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

app.js

import styles from './core-styles/brand/_variables.scss' //  anotherColor: "#FFF", someColor: "#000" 
import  someColor  from './core-styles/brand/_variables.scss' // #000

旁注：我更喜欢在 Sass Maps 中使用引号，但您可以省略它们。

【讨论】：

这真的很有帮助。唯一有效的答案！

我不知道为什么，但这似乎不再起作用了 :( codesandbox.io/s/cool-night-92rij

必须写：@each $key, $value in $theme-colors #$key: #$value; 即。必须插入变量

【参考方案2】：

从 Bootstrap 4 中获得启发，您可以将 SASS 映射与如下所示的循环组合；

/* 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 Docs的例子

【讨论】：

我考虑过使用它，但我并不太热衷于使用地图来引用我所有的颜色。我会接受这个作为答案，因为我将发布相同的内容，因为我相当有信心这是实现它的唯一方法......

谢谢@BenCarey - 我已经编辑了我的答案以包含一个循环，但不幸的是它仍然依赖于地图。是的，我想不出任何其他方式:(

【参考方案3】：

你可以在这里尝试使用SCSS map 示例

$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 Maps 链接：https://sass-lang.com/documentation/values/maps