CODEWITHSUNDEEP
javascriptcssreactjssass
İlker
İlker

Reputation: 2090

Manipulating SASS variable in React Component

I found some similar questions but they were pretty old. So I will tell a little bit of concept of my app so you can understand.

I have a solar system app and planets are orbiting around sun. And one year equals to 5 seconds in this app like this;

//Planets.scss

$--one-year: 5s;

So planets' orbit animatons are defined like this;

.planets__earth-orbit {
  width: 20rem;
  height: 20rem;
  animation: Rotation $--one-year linear infinite; // One year
}
.planets__jupiter-orbit {
  width: 40rem;
  height: 40rem;
  animation: Rotation (12 * $--one-year) linear infinite; // Jupiter's 1 year equals to 12 Earth years
}

@keyframes Rotation {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

So I want users to define one year's value as seconds. For example they can set one-year variable to 2 seconds to make rotations faster.

How can I make it work, if there is no way to do it, should I define the variable inside of the React component and manipulate the "animation-duration" property from there?

Thanks.

Upvotes: 1

Views: 38

Answers (1)

Martin
Martin

Reputation: 6172

You can't change a sass variable during runtime because sass is compiled to css during your build step. But if I was in your situation I would try to replace the sass variable with a css custom variable and see if it works, should be doable I think. (won't work in IE11 though)

:root {
  --one-year: 5s;
}

.planets__earth-orbit {
  width: 20rem;
  height: 20rem;
  animation: Rotation var(--one-year) linear infinite;
}

and update the variable value on the root element via javascript

rootElement.style.setProperty('--one-year', `${newValue}s`);

Upvotes: 1

Related Questions