Question

我最近了解到，您可以像这样将样式从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？

Answer 1

从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

中的一些示例

Answer 2

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

使用 camelcase ，这样您就可以单独导出变量。
在外部设置@each指令，这样就不会为每个变量生成新的:export规则。

_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中使用引号，但是您可以忽略它们。

Answer 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

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

3 个答案: