How to control Sass Variable with javascript

You can't. SASS is a CSS preprocessor, which means that all SASS specific information disapears when you compile it to CSS.

CSS

:root {
  subTitleLeftMargin: 1.5vw;
}

.element {
  margin-left: var(--subTitleLeftMargin);
}

JS or TS

document.documentElement.style.setProperty("--subTitleLeftMargin", "6vw");

I also needed this functionality, here's what worked for me:

With JS you can set a class to body, ex. .blue or .default Now create a set of rules to extend from, which you'd like to set:

.default .themeColor {
  color: 'red';
}
.blue .themeColor {
  color: 'blue';
}

Now instead of having color: $someColor in your scss file, use it like this:

.someClass {
   @extend .themeColor;
 }

Now, if your body will have the default class, the color inside someClass will be red, and if body will have the blue class the color will be blue.

• Use Sass, or any other variables to set initial values

• JavaScript sets CSS custom properties of the same name to update those values as needed (same name is just a preference).

You do not need to define CSS root properties because the Sass variable is the fallback and will be used initially. This allows you to do whatever you want server-side with Sass or any other style processor, and update the values client-side.

Here is an example of a color picker controlling the background-color.

see Codepen demo here.

scss

$selectedColor: #000;

body {
  background: var(--selectedColor, $selectedColor);
}

html

<input type="color">

js

const colorInput = document.querySelector('[type=color]')

// Set the CSS custom property --selectedColor on the root element
// Now JavaScript controls this variable and everywhere you used Sass variables if you follow this pattern
const handleColorInput = e => document.documentElement.style.setProperty("--selectedColor", e.target.value)
    
colorInput.addEventListener('input', handleColorInput)

I find sass-extract-loader especially helpful for using with Create-React-App.

You can use it like:

_variables.scss

$theme-colors: (
  "primary": #00695F,
  "info": #00A59B
);

component.tsx

 const style = require('sass-extract-loader!./_variables.scss');
 const brandInfo = style.global['$theme-colors'].value.primary.value.hex; // '#00695F';

If you're looking to do what bootstrap do (ie editing fields to download a theme).

You'd have to:

1. Have the files on hand that you want to edit
2. Store these variables as a string, and use .replace() to search and replace variables
3. Output this string and compile it to a file and or zip it up for download.

I'd personally do this with php.

Share data between Sass and JavaScript using JSON.

See related question https://stackoverflow.com/a/26507880/4127132

JavaScript runs client-side (in the web browser), while Sass is generated server-side, so you have to find some way to bridge that gap. One way to do this would be to set up some AJAX-style listening to send JavaScript events over to your server, and then have the server edit and re-compile your style.sass file.

variable in style

:root {

  --bg: #000;
  --font-size:12px;

}

change variable value by javascript

root.style.setProperty('--bg', '#fff');
root.style.setProperty('--font-size', '14px');

I have used many variables in my sass file for background color, font-size

I think you might be trying to solve the wrong problem. Managing the variables in javascript will just move the problem from point A to point B

What I imagine you're doing and its a natural mistake many people make:

$bg-color: rgb( 255, 0, 0 );
$bg-color-alt: rgb( 128, 0, 0 );
$link-color: rgb( 255, 0, 0 );
$link-color-hover: rgb( 128, 0, 0 );

You define your colors based on how you're using them within the design

What you should be doing is defining your palette and having the colors be relative within that.

$red-100: rgb( 255, 0, 0 ); // #f00
$red-200: rgb( from $red-100 calc( r / 2 ) g b ); // #800000
$red-300: rgb( from $red-200 calc( r / 2 ) g b ); // #400000

1. prevents you from redundant definition of values because of how something is used (i.e. red is defined once, regardless of where you're using it)
2. it saves you from meaningless variable names (i.e. red, darkRed, darkerRed, darkestRed, darkerThanDarkestRed)
3. makes it easier for other people to jump into your work (no one has to guess what you meant by darkerRed)
4. saves you from making a mistake with your palette since the colors are all relative

This methodology obviously doesn't only apply to colors, but fonts too.