Animation mixin patterns in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass animation mixin usage?

Given the Sass code below, what CSS will be generated for the .box class?

SASS

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  @include fadeIn(2s);
}

A

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: backwards;
}

B

.box {
  animation-name: fadeIn;
  animation-duration: 2;
  animation-fill-mode: forwards;
}

C

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

D

.box {
  animation-name: fadeOut;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

💡 Hint

Check how the mixin uses the $duration parameter and the animation-fill-mode property.

The mixin sets animation-name to fadeIn, animation-duration to the passed $duration (2s), and animation-fill-mode to forwards. Option C matches exactly.

🧠 Conceptual

intermediate

Which option correctly explains the benefit of using animation mixins in Sass?

Why do developers use animation mixins in Sass instead of writing animation CSS directly each time?

A They automatically optimize animations for all browsers without extra code.

B They allow reusing animation code with different parameters, reducing repetition and errors.

C They convert animations into JavaScript for better performance.

D They prevent animations from running on mobile devices by default.

💡 Hint

Think about how mixins help with writing CSS faster and cleaner.

Mixins let you write animation code once and reuse it with different values, saving time and avoiding mistakes. They don't automatically optimize or convert animations.

❓ selector

advanced

Which Sass selector usage correctly applies an animation mixin only on hover?

Given the mixin @mixin slideRight($time), which option applies it only when the user hovers over .menu-item?

SASS

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

@keyframes slideRight {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

A

.menu-item {
  &:hover {
    @include slideRight(1s);
  }
}

B

.menu-item:hover {
  @include slideRight(1s);
}

C

.menu-item {
  @include slideRight(1s);
  &:hover {
    animation-play-state: paused;
  }
}

D

.menu-item:hover {
  animation-name: slideRight;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

💡 Hint

Consider Sass nesting and how mixins are included inside selectors.

Option A uses Sass nesting with &:hover inside .menu-item and includes the mixin correctly. Option A is plain CSS syntax, not Sass nesting. Option A applies animation always and pauses on hover. Option A writes CSS manually, not using the mixin.

❓ layout

advanced

How does using animation mixins affect CSS file size and maintainability?

Consider a large project with many animations. What is the main layout-related benefit of using animation mixins in Sass?

A They reduce CSS file size by generating only needed animation code and improve maintainability by centralizing animation logic.

B They increase CSS file size because mixins duplicate code everywhere they are included.

C They automatically convert animations into CSS Grid layouts.

D They force all animations to run simultaneously, improving layout speed.

💡 Hint

Think about how mixins help organize code and avoid repetition.

Mixins let you write animation code once and reuse it, so you avoid repeating code manually. This keeps CSS smaller and easier to update. They do not force animations to run together or convert to grid.

❓ accessibility

expert

Which Sass animation mixin pattern best supports users who prefer reduced motion?

How can you write a Sass animation mixin that respects users' system preference for reduced motion?

A

@mixin fadeInReduced($duration) {
  animation-name: fadeIn;
  animation-duration: $duration;
  animation-fill-mode: forwards;
  @media (prefers-reduced-motion: reduce) {
    animation-delay: 0s;
  }
}

B

@mixin fadeInReduced($duration) {
  animation-name: fadeIn;
  animation-duration: $duration;
  animation-fill-mode: forwards;
  @media (prefers-reduced-motion: reduce) {
    animation-play-state: paused;
  }
}

C

@mixin fadeInReduced($duration) {
  animation-name: fadeIn;
  animation-duration: $duration;
  animation-fill-mode: forwards;
  @media (prefers-reduced-motion: reduce) {
    animation-duration: 0s;
  }
}

D

@mixin fadeInReduced($duration) {
  @media (prefers-reduced-motion: reduce) {
    animation: none !important;
  }
  @media (prefers-reduced-motion: no-preference) {
    animation-name: fadeIn;
    animation-duration: $duration;
    animation-fill-mode: forwards;
  }
}

💡 Hint

Consider how to completely disable animations for users who want reduced motion.

Option D disables animation entirely with 'animation: none !important;' inside the reduced motion media query, which respects user preference. Other options only pause or shorten animation but do not fully disable it.

Practice

1. What is the main benefit of using an animation mixin in Sass?

easy

A. It disables animations on mobile devices.

B. It automatically creates keyframes without writing them.

C. It allows reusing animation code with different settings easily.

D. It converts animations into static images.

Solution

1. Step 1: Understand what mixins do

   Mixins let you write reusable blocks of code that can be customized with parameters.

2. Step 2: Apply this to animations

   Animation mixins let you reuse animation styles and change things like speed or delay without rewriting code.

3. Final Answer:

   It allows reusing animation code with different settings easily. -> Option C

4. Quick Check:

   Animation mixins = reuse + customize [OK]

Hint: Mixins reuse code with custom options fast [OK]

Common Mistakes:

• Thinking mixins auto-generate keyframes
• Believing mixins disable animations
• Confusing mixins with static images

2. Which of the following is the correct way to define a simple animation mixin in Sass?

easy

A. @mixin fade($duration) { animation: fadeIn $duration ease-in; }

B. @mixin fade { animation: fadeIn duration ease-in; }

C. @mixin fade($duration) { animation: fadeIn duration ease-in; }

D. @mixin fade($duration) animation: fadeIn $duration ease-in;

Solution

1. Step 1: Check mixin syntax

   Mixins use @mixin name(parameters) { ... } with braces and parameters prefixed by $.

2. Step 2: Verify animation property usage

   The animation property should use the parameter with $duration inside the value.

3. Final Answer:

   @mixin fade($duration) { animation: fadeIn $duration ease-in; } -> Option A

4. Quick Check:

   Correct mixin syntax = @mixin fade($duration) { animation: fadeIn $duration ease-in; } [OK]

Hint: Use @mixin name($param) { ... } with $param inside [OK]

Common Mistakes:

• Forgetting $ before parameter name
• Missing braces {} around mixin body
• Using parameter name without $ inside animation

3. Given this Sass code:

@mixin slide($distance, $duration) {
  animation: slideIn $duration ease forwards;
  transform: translateX($distance);
}
.box {
  @include slide(100px, 2s);
}

What CSS will be generated for the .box class?

medium

A. .box { animation: slideIn $duration ease forwards; transform: translateX($distance); }

B. .box { animation: slideIn 2s ease forwards; transform: translateX(100px); }

C. .box { animation: slideIn 100px ease forwards; transform: translateX(2s); }

D. .box { animation: slideIn 2s ease; transform: translateX(100px); }

Solution

1. Step 1: Understand mixin parameters usage

   The mixin uses $distance and $duration to set transform and animation duration respectively.

2. Step 2: Substitute values in the mixin

   Calling @include slide(100px, 2s) replaces $distance with 100px and $duration with 2s.

3. Final Answer:

   .box { animation: slideIn 2s ease forwards; transform: translateX(100px); } -> Option B

4. Quick Check:

   Parameter substitution = .box { animation: slideIn 2s ease forwards; transform: translateX(100px); } [OK]

Hint: Replace $params with passed values exactly [OK]

Common Mistakes:

• Leaving parameters as variables in output
• Swapping parameter values
• Missing 'forwards' in animation shorthand

4. Identify the error in this Sass animation mixin:

@mixin bounce($time) {
  animation-name: bounce;
  animation-duration $time;
  animation-iteration-count: infinite;
}

medium

A. Parameter $time should be $duration.

B. Wrong mixin name 'bounce' instead of 'bounceAnimation'.

C. Animation-iteration-count cannot be infinite.

D. Missing colon ':' after 'animation-duration' property.

Solution

1. Step 1: Check property syntax inside mixin

   CSS properties need a colon ':' between property and value.

2. Step 2: Locate the error

   Line 'animation-duration $time;' misses the colon after 'animation-duration'.

3. Final Answer:

   Missing colon ':' after 'animation-duration' property. -> Option D

4. Quick Check:

   Property syntax requires ':' [OK]

Hint: CSS properties always need ':' between name and value [OK]

Common Mistakes:

• Omitting colon after property name
• Confusing parameter names
• Thinking infinite is invalid for iteration count

5. You want to create a reusable animation mixin that accepts parameters for animation name, duration, delay, and easing. Which of the following mixin definitions correctly supports all these parameters with default values?

hard

A. @mixin animate($name, $duration: 1s, $delay: 0s, $ease: ease-in-out) {
animation: $name $duration $ease $delay forwards;
}

B. @mixin animate($name, $duration = 1s, $delay = 0s, $ease = ease-in-out) {
animation: $name $duration $ease $delay forwards;
}

C. @mixin animate($name, $duration: 1s, $delay: 0s, $ease: ease-in-out) {
animation: $name $duration $delay $ease forwards;
}

D. @mixin animate($name, $duration: 1s, $delay: 0s, $ease: ease-in-out) {
animation: $name $duration $ease forwards $delay;
}

Solution

1. Step 1: Check default parameter syntax

   In Sass, default values use colon ':' not equals '=' in parameter list.

2. Step 2: Verify animation shorthand order

   The correct order is: name, duration, easing, delay, then fill-mode (forwards).

3. Final Answer:

   @mixin animate($name, $duration: 1s, $delay: 0s, $ease: ease-in-out) { animation: $name $duration $ease $delay forwards; } -> Option A

4. Quick Check:

   Default params with ':' and correct animation order = @mixin animate($name, $duration: 1s, $delay: 0s, $ease: ease-in-out) { animation: $name $duration $ease $delay forwards; } [OK]

Hint: Use ':' for defaults and correct animation property order [OK]

Common Mistakes:

• Using '=' instead of ':' for defaults
• Mixing animation property order
• Placing delay after forwards