Using SASS variables in JavaScript: A guide

Question

Using SASS variables in JavaScript: A guide

My JavaScript file contains a list of color variables as an Object.

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

The Object above is derived from a scss file which holds 50 colors. I named the objects in line with the scss variables so I can easily use them in my React component.

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

I have imported these colors to my jsx file from a color.js file.

import { colors } from './theme';

Now, I am trying to set the background of a div using one of those color variables. However, the usual approach is not working for me.

component.jsx

Code:

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

I have tried different methods but none seem to be effective. Any assistance on this matter would be highly appreciated. (It would be preferable if I could also apply the variable in a css file within the theme-color class. If not possible, that's okay too).

I am currently utilizing react 16. Your help and guidance would be greatly valued.

javascript css reactjs scss-mixins react-16

Answer 1

Answer №1

Initially, it's important to note that SASS variables are not available during runtime but only at compilation time. The resulting CSS file does not contain any SASS variables as it replaces them with their raw values.

To work around this limitation, you can create CSS variables based on your SCSS counterparts and then use these CSS variables in your code.

:root { 
  --ui-background: #{map-get($carbon--theme, "ui-background")};
  --ui-01: #{map-get($carbon--theme, "ui-01")};
  --ui-02: #{map-get($carbon--theme, "ui-02")};
}

Simply create an additional SASS/SCSS file with the provided snippet above and adjust the values in the colors variable accordingly.

This method works seamlessly during runtime.

As a bonus tip, if you need to iterate over every color in the theme map, you can utilize SASS's @each flow-control rule like shown below:

:root {
  @each $name, $color in $carbon--theme {
    --#{$name}: #{$color};
  }
}

In addition, the colors variable is structured as an array, eliminating the need to extract keys for iteration.

One potential issue to watch out for is: className={'theme-color')} - there appears to be an extra closing parenthesis here. For string values, simply pass the value directly in quotes without using JSX placeholders.

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

If the colors array consists solely of color values, you can simplify it by replacing it with an array of strings like: ['--ui01', '--ui02', ...]

With this approach, the mapping becomes even more straightforward:

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

Lastly, if you prefer not to use CSS variables, another option is to utilize a library such as scss-to-json which extracts SCSS variables and outputs them as JSON. This will require an additional build step and importing/merging the JSON into your codebase.

Answer 2

Initially, it's important to note that SASS variables are not available during runtime but only at compilation time. The resulting CSS file does not contain any SASS variables as it replaces them with their raw values.

To work around this limitation, you can create CSS variables based on your SCSS counterparts and then use these CSS variables in your code.

:root { 
  --ui-background: #{map-get($carbon--theme, "ui-background")};
  --ui-01: #{map-get($carbon--theme, "ui-01")};
  --ui-02: #{map-get($carbon--theme, "ui-02")};
}

Simply create an additional SASS/SCSS file with the provided snippet above and adjust the values in the colors variable accordingly.

This method works seamlessly during runtime.

As a bonus tip, if you need to iterate over every color in the theme map, you can utilize SASS's @each flow-control rule like shown below:

:root {
  @each $name, $color in $carbon--theme {
    --#{$name}: #{$color};
  }
}

In addition, the colors variable is structured as an array, eliminating the need to extract keys for iteration.

One potential issue to watch out for is: className={'theme-color')} - there appears to be an extra closing parenthesis here. For string values, simply pass the value directly in quotes without using JSX placeholders.

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

If the colors array consists solely of color values, you can simplify it by replacing it with an array of strings like: ['--ui01', '--ui02', ...]

With this approach, the mapping becomes even more straightforward:

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

Lastly, if you prefer not to use CSS variables, another option is to utilize a library such as scss-to-json which extracts SCSS variables and outputs them as JSON. This will require an additional build step and importing/merging the JSON into your codebase.

Using SASS variables in JavaScript: A guide

Answer №1

Similar questions

When clicking on links that are not within the ng-view element, you will be redirected to the

Using NPM in conjunction with a PHP/STATIC web site directory structure: A comprehensive guide

Unable to maintain active status on Vuejs (PrimeVue) Sidebar component leads to malfunction

Troubleshooting Problem with React Hooks When Invoking useState

Troubleshooting: React promise not functioning in functional component due to issues with UseEffect and UseState

Issue with passing parameter in Jquery AJAX request to controller function

Updating UI in React after submitting a modal form

Protractor performs the afterEach function prior to the expectations being met

Looking to streamline a JavaScript function, while also incorporating jQuery techniques

Unexpected resizing occurs when SVGs are nested within each other

Receive real-time price updates from Next.js using GetServerSideProps data

Numbering each numeral

Using Bootstrap's dual listbox, you can easily select single options with the ability to add or delete them. Upon selection, the

Struggling to locate a declaration file for the 'cloudinary-react' module? Consider running `npm i --save-dev @types/cloudinary-react` or exploring other options to resolve this issue

What is the method for displaying an asterisk in a select box option?

Arrange blocks within bootstrap columns using grid css

vertical alignment, almost there

An error was encountered while linting /app/layout.tsx at line 16: Rule "@typescript-eslint/no-empty-function" was violated due to inability to read properties of undefined (reading 'getTokens')

jQuery - Event cannot be triggered on the 'deselect' or 'focusout' of <option> tag

AngularJS: Monitoring $locationChangeStart for token verification