Reassigning SASS variable inside javascript function, similar to setProperty used for CSS variables?

Question

In css i can declare variable:

:root {
  --main-bg-color: pink;
}

And then using javascript to reassign value:

document.body.style.setProperty('--main-bg-color', '#5A8795')

How to make something similar with Sass variables?

$main-bg-color: pink;

Simplicius · Accepted Answer · 2020-08-29 04:29:31Z

1

This is unfortunately not possible. You can however achieve what you want by using this technique. And then edit it in the final step via Js.

$var: /**/;

--variable: #{$var};

Hope this is at least a little helpful ;'D

answered Aug 29, 2020 at 4:29

Simplicius

2,0951 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simplicius Over a year ago

@Qui-GonJinn, Yeah! Not that long ago, that I actually first stumbled upon this.

Jordan · Accepted Answer · 2020-08-29 04:37:12Z

1

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

answered Aug 29, 2020 at 4:37

Jordan

1171 gold badge1 silver badge12 bronze badges

Comments

John Deck · Accepted Answer · 2023-01-14 08:27:46Z

0

Try this:

$main: pink;

:root {
  --main: #{$main}
}

answered Jan 14, 2023 at 8:27

John Deck

9073 gold badges15 silver badges28 bronze badges

Collectives™ on Stack Overflow

Reassigning SASS variable inside javascript function, similar to setProperty used for CSS variables?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related