Manipulating SASS variable in React Component

Question

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.

Martin · Accepted Answer · 2021-03-03 14:53:17Z

1

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`);

answered Mar 3, 2021 at 14:53

Martin

6,2682 gold badges28 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

Manipulating SASS variable in React Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related