0

I want to define CSS variables like in Sass. Something like:

.someClass {
  background-image: $imageLink;
  color: $someColor;
}

And i Want to define $imageLink and $someColor in my class or in json file.

Can i do this without Sass or Less? (Or without css variables, because it does not supported in IE.)

I an using angular2 and webpack in my project.

John Doe
  • 3,794
  • 9
  • 40
  • 72
  • You could use http://cssnext.io/ but it's still using "something", you can't without any other tools as not supported yet. – GillesC Nov 04 '16 at 17:06
  • Can you provide a case study of why you want to do this? –  Nov 04 '16 at 17:08

1 Answers1

1

Of course you cannot set SASS variables at run-time, because by that time the SASS has already been compiled.

A classic approach is to instead think in terms of "themes", and select a theme by a class on a higher-level element (such as body). So you could have

.darktheme  .someClass { color: white; }
.lighttheme .someClass { color: black; }

Now from your JS you can change the theme with

document.body.classList.add('darktheme');