How to Use SASS/SCSS in the Anime.js Animation Library

Anime.js is an excellent JavaScript animation library that’s easy to use and easy to read. Documentation lists accepted values for properties as unit-less, specific unit, relative, colors, from-to, and function based. Anime.js might not accept SASS directly, but does accept JavaScript variables.

Oh! Of Course!

If a value for a CSS property in anime.js can be a simple variable, the question becomes: How to Pass SCSS into a JavaScript Variable.

Good News! There’s a package for that! css-loader

---

npm install --save-dev css-loader

---

Ok, Now What?

Export your variable directly from the .scss file using the css-loader syntax and then import your .scss into your JavaScript!

---

// variables.scss
$white-color: #ffffff;

:export {

whitecolor: $white-color;

}

---

//your js file
import variables from variables.scss

anime ({
...
color: variables.whitecolor;
...
})

---

And Finally
You have a JavaScript variable that can be added as a value for your css properties in your anime.js animations!