0

I have three files

.. icons.scss --> mixin code

.. main.scss --> here I call the mixin using @include icon(name)

.. main.js

Everything until now is working perfectly as expected. But what if I want to change the value of ,name' in the mixin from inside the JS file..

We all know we have more than one way to manipulate CSS inside JS.

For example: inside my JS I do something like:

document.getElementById("id").style = '@include icon(name2)';

Its not going to work because I think JS is looking for a property and a value, but how to do it? Is there a way?

Mohammad Shanaah
  • 51
  • 8

2 Answers2

2

You cannot use SCSS/SASS in JS directly. SASS is just a CSS preprocessor. A CSS preprocessor helps you write maintainable, future-proof code and it will seriously reduce the amount of CSS you have to write.

The SCSS files are compiled into CSS syntax at build time, the browser doesn't know how to interpret SCSS it uses only CSS for styles.

Vladu Ionut
  • 8,075
  • 1
  • 19
  • 30
0

i have to downvote your question, it seems like you are not understanding the concept of SCSS/CSS.

Instead of trying to override exists CSS Property, you can try to create different class that point to different icon and just change the class name.

Ponpon32
  • 2,150
  • 2
  • 15
  • 26
  • 2
    Actually I think I understand it right but I wasnt thinking clearly and I had to ask, in the other hand you just gave me an idea how to do it, so thank you.. – Mohammad Shanaah Jul 18 '18 at 08:56