Как повторно использовать переменную SASS в JavaScript - PullRequest
Новая
       37

Как повторно использовать переменную SASS в JavaScript

0 голосов
/ 20 сентября 2019

У меня есть список цветовых переменных в файле JavaScript в качестве объекта. 

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

Я создал объектный файл выше на основе scss файлакоторые имеют список из 50 цветов.Я использовал то же имя, что и переменная scss Итак, я могу использовать переменную scss в своем компоненте React. 

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

Я импортировал эти цвета в файл jsx из файла color.js. 

import { colors } from './theme';

И я хочу использовать эту переменную цвета, чтобы дать фон следующего div.Я попытался следующим образом Итак, я могу применить переменную scss.Но не работает. 

component.jsx

Код: 

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

Я пробовал много вещей, но ничего не получалось.Любая помощь будет принята с благодарностью.(Было бы неплохо, если бы я мог использовать эту переменную в файле css (component.scss) внутри класса theme-color. Если нет, то все в порядке).

Я использую реагирование 16. Любая помощь будет принята с благодарностью идайте мне знать, если возникнут вопросы.

1 Ответ

1 голос
/ 20 сентября 2019

Прежде всего - переменные SASS не существуют во время выполнения.Доступны только во время компиляции.Выходной файл CSS вообще не включает в себя переменные SASS, поскольку заменяет вхождение любой переменной необработанным значением.

Вы можете создать переменные CSS на основе аналогов SCSS, а затем повторно использовать переменные 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")};
}

Просто создайте дополнительный файл SASS / SCSS с приведенным выше фрагментом.

Затем просто отрегулируйте значения в переменной colors. 

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

Это прекрасно работаетво время выполнения.

Бонус - если по какой-то причине вам нужно повторно использовать каждый цвет, вы можете просто перебрать карту темы, используя @each правило управления потоком SASS, например: 

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

BTW * Переменная 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"/>
);

BTW # 2.Если по какой-то причине вы не хотите использовать переменные CSS, другой вариант - использовать некоторую библиотеку, например scss-to-json , которая извлекает переменные SCSS и выводит их в виде JSON.Это требует дополнительного шага сборки, а также импорта / объединения JSON в вашу кодовую базу.

...