CODEWITHSUNDEEP
csssasscss-animations
user11955706
user11955706

Reputation:

apply animation on SCSS variables

I have used scss variables in all of my code, like this:

$primary: royalblue;
body {
  background: $primary;
  color: black;
}
.list-item {
  // some code
  span, a {
    background: black;
    color: $primary;
  }
}

now, I want to create an animation for body background color:

@keyframes bganimation {
  from {
    $primary: royalblue;
  }
  to {
    $primary: tomato;
  }
}

but I know scss is a language that compiles to css... is there any other way to do that? I can't rewrite the code, help please.

Upvotes: 1

Views: 1752

Answers (2)

Sergio Terrasi
Sergio Terrasi

Reputation: 587

You have to animate the background-color property, so it should be:

@keyframes bganimation {
  from {
    background-color: $primary;
  }
  to {
    background-color: tomato;
  }
}

Upvotes: 0

webfussel
webfussel

Reputation: 116

I guess you first have to understand how SCSS Variables actually work: When compiling SCSS to CSS the variables are replaced with the actual current value of the variable so in the end there won't be any variables anymore.

That said your keyframes block will simply be an empty block in the end.

If you want to have real variables, you would have to use actual CSS Variables

--some-variable: red;

(Notice that this won't work out of the box in "browsers" like IE)

There are more things you should fix in your code: - There is no animation set for any of the elements (via animation attribute) - In the keyframes block you have to define which attribute should animate and what value they should take while animation

eg:

@keyframes bganimation {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

So you would have to rewrite the code at least a bit for it to work.

Upvotes: 1

Related Questions