Animation mixin patterns in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mixin in Sass?

A mixin in Sass is a reusable block of styles that you can include in other selectors. It helps avoid repeating code and keeps styles consistent.

beginner

How do you define a simple animation mixin in Sass?

You define a mixin with @mixin keyword, then include animation properties inside it. For example:<br>

@mixin fadeIn($duration) {
  animation-name: fadeIn;
  animation-duration: $duration;
  animation-fill-mode: forwards;
}

beginner

Why use animation mixins instead of writing animation CSS repeatedly?

Mixins save time and reduce mistakes by reusing animation code. They make it easy to change animation details in one place and keep your styles consistent.

intermediate

What is the benefit of using parameters in animation mixins?

Parameters let you customize animations when you include the mixin. For example, you can change duration or delay without rewriting the whole animation code.

intermediate

How can you combine multiple animations in one mixin?

You can list multiple animations separated by commas inside the mixin. This lets you apply several animations at once with one mixin call.

Which Sass directive is used to create a mixin?

A @mixin

B @include

C @function

D @extend

The @mixin directive defines a mixin. @include is used to use a mixin.

What does the animation-fill-mode: forwards; property do in an animation?

A Keeps the animation at its last frame after finishing

B Repeats the animation infinitely

C Starts the animation immediately

D Delays the animation start

The forwards value keeps the element styled as it is at the end of the animation.

How do you pass a duration of 2 seconds to a mixin named fadeIn?

A @mixin fadeIn(2s);

B fadeIn: 2s;

C animation-duration: 2s;

D @include fadeIn(2s);

You use @include with the mixin name and pass the argument in parentheses.

Which of these is NOT a benefit of using animation mixins?

A Reusing animation code easily

B Changing animation details in one place

C Automatically creating keyframes

D Keeping styles consistent

Mixins help reuse code but do not automatically create keyframes; you must define keyframes separately.

How can you apply two animations, slideIn and fadeOut, in one mixin?

A animation: slideIn fadeOut;

B animation-name: slideIn, fadeOut;

C animation-name: slideIn; animation-name: fadeOut;

D animation: slideIn; animation: fadeOut;

You list multiple animation names separated by commas to apply them together.

Explain how to create and use an animation mixin in Sass with a customizable duration.

Think about how to write reusable code that accepts a time value.

Describe the advantages of using animation mixins in your CSS workflow.

Consider how mixins save time and reduce errors.