Antrikshy Antrikshy - 3 months ago 11
Sass (Sass) Question

How to design a Sass animation library that allows users to modify variables?

I am working on a JS/CSS library using Sass. I want to provide my users the option of importing my Sass directly into their project and compiling it themselves, with the option to modify some variables that change the behavior of included CSS animations.

However, I'm relatively new to Sass, and I'm not sure how I should do this. How do Sass users typically expect to import and modify Sass variables (like with Bootstrap or Bulma)? Should I use the

!default
keyword that's used here?

Answer

You should try to understand how style frameworks like bootstrap or Foundation work.

Example can be found at plunker.

Here is the basic structure of your project.

animation.scss // Your library
variables.scss // User custom variables
main.scss // User main scss file

Let's take a look at these files.

Animation.scss has all your default variables and all classes you need. Note, that classes are wrapped by mixins to allow a user to import them separately. All variable in this file has a flag !default to allow a user to override them. There is a simple class animation that adds a color property to the element.

$color: green !default;

@mixin animation() {
  .animation {
    color: $color;
  }
}

Variables.scss contains user custom variables. They don't have any flags.

$color: red; // Note, there is no !default flag

Main.scss imports all files and include some of library components. For example, it imports component called animation.

// Import library
@import 'animation.scss';

// Override library variables
@import 'variables.scss';

// Import components
@include animation();

Summary

By default, your library has variable $color with a value of green. User overrides it to red and includes component animation. So any element with class animation should have a red color.