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

Accessing the AppContext in Next.js within the _document file is the

Dynamic starting point iteration in javascript

The Bootstrap navbar collapse fails to expand in the appropriate location

Using kebab-case in CSS properties within objects is not applicable. Perhaps you intended to use MozAppearance instead?

Using Selenium Webdrivers to Browse Pages with Minimal Resource Loading

Troubleshooting encoding problems with Google Cloud's Speech-to-Text API using Node.js

Having trouble installing npx create-react-app with yarn?

Using GSAP to create a staggered animation with a negative delay

Having trouble getting the timer function to execute upon page load in JavaScript

Is there a way to upload numerous images from my local disk onto a canvas using Fabric.js?

Showing nested JSON data in ng-repeat

Tips for integrating new channels and categories using a Discord bot

Exploring the World of JSON Nested Arrays with Unknown Titles and Organizing Them for Storage

The AngularJS Navbar is Bootstrapped

Having trouble choosing elements with angular.element within ng-repeat loop

Cease the continuous scrolling of the display element now

Navigate to the correct page when the Button is clicked in a ReactJS/Django project

Issue with React-Native FlatList's scrolling functionality

How can one eliminate the white space surrounding the data that Vue is binding?

How can I effectively refresh the provider_token / access token for Discord in NextJS with Supabase Auth?