如何在 JavaScript 中重用 SASS 变量

Question

我在 JavaScript 文件中有颜色变量列表作为对象。

export const colors = [
{
    colorVariable: "$ui-background"
},
{
    colorVariable: "$ui-01"
},
{
    colorVariable: "$ui-02"
},
...
]

我基于 scss 文件创建了上面的目标文件，该文件有 50 种颜色的列表。我使用了与 scss 变量相同的名称所以，我可以在我的 React 组件中使用 scss 变量。

$carbon--theme: (
    ui-background: #ffffff,
    ui-01: #f3f3f3,
    ui-02: #ffffff,
    ...
)

我将这些颜色从 color.js 文件导入到 jsx 文件中。

import { colors } from './theme';

我想使用该颜色变量来提供以下 div 的背景。我尝试了以下方式所以，我可以应用 scss 变量。但是，不工作。

component.jsx

代码：

Object.keys(colors).map(key => {
        return (
        <div style={{ background: colors[key].colorVariable }} className={'theme-color')} />
        )
})

我尝试了很多东西，但都没有奏效。任何帮助将不胜感激。 （如果我可以在 theme-color 类中的 css (component.scss) 文件中使用该变量，那就太好了。如果没有，那就好了）。

我正在使用 react 16。任何帮助将不胜感激，如果有任何问题，请告诉我。

Answer 1

首先 - SASS 变量在运行时不存在。仅在编译期间可用。 输出 CSS 文件根本不包含 SASS 变量，因为它会将任何出现的变量替换为原始值。

您可以基于 SCSS 对应项创建 CSS 变量，然后在您的代码中重用 CSS 变量。

:root { /* or your element selector instead of `:root` so the variables will be scoped */
  --ui-background: #{map-get($carbon--theme, "ui-background")};
  --ui-01: #{map-get($carbon--theme, "ui-01")};
  --ui-02: #{map-get($carbon--theme, "ui-02")};
}

只需使用上面的 sn-p 创建额外的 SASS/SCSS 文件。

然后只需调整colors 变量中的值。

export const colors = [
  {
    colorVariable: "var(--ui-background)"
  },
  {
    colorVariable: "var(--ui-01)"
  },
  {
    colorVariable: "var(--ui-02)"
  }
]

它在运行时完美运行。

奖励 - 如果出于某种原因您需要重用每种颜色，您可能只需使用 SASS 的 @each 流控制规则迭代主题图，例如：

:root { /* or your element selector */
  @each $name, $color in $carbon--theme {
    --#{$name}: #{$color};
  }
}

---

顺便说一句 colors 变量是一个数组，因此您无需获取键即可对其进行迭代。

还有一个可能引发错误的附加问题： className={'theme-color')} - 你有一个结束括号 ) 那里。 无论如何，对于字符串值，您可以简单地省略 JSX 占位符并直接在引号中传递值。 看固定例子：

colors.map(
  (item) => <div key={item.colorVariable} style={{ background: item.colorVariable }} className="theme-color"/>
);

如果colors 数组仅包含颜色值，您可以简单地将其替换为字符串数组，例如： ['--ui01', '--ui02', ...]

那就更简单了：

colors.map(
  (color) => <div key={color} style={{ background: color }} className="theme-color"/>
);

---

顺便说一句#2。 如果由于某种原因您不想使用 CSS 变量，则另一个选项是使用诸如 scss-to-json 之类的库来提取 SCSS 变量并输出为 JSON。这需要额外的构建步骤以及在您的代码库中导入/合并 JSON。