Why mixins eliminate duplication in SASS - Quick Recap

Recall & Review

beginner

What is a mixin in Sass?

A mixin is a reusable block of styles that you can include in other selectors to avoid repeating the same CSS code.

beginner

How do mixins help eliminate duplication?

Mixins let you write styles once and reuse them many times, so you don’t have to copy and paste the same code in multiple places.

beginner

Show a simple example of a mixin in Sass.

@mixin center { display: flex; justify-content: center; align-items: center; } .box { @include center; height: 100px; width: 100px; background-color: lightblue; }

beginner

Why is using mixins better than copying styles?

Using mixins keeps your code clean and easier to update. If you change the mixin, all places using it update automatically.

intermediate

Can mixins accept parameters? Why is this useful?

Yes, mixins can take parameters to customize styles each time you use them, making them flexible and reducing duplication even more.

What does a Sass mixin help you avoid?

A Writing HTML tags

B Repeating the same CSS code multiple times

C Using JavaScript functions

D Adding images to a webpage

Mixins let you reuse CSS code blocks, so you don't have to write the same styles again and again.

How do you include a mixin inside a CSS rule in Sass?

A @include mixin-name;

B @mixin mixin-name;

C include(mixin-name);

D use mixin-name;

You use '@include mixin-name;' to add the mixin's styles inside a selector.

What happens if you change a mixin's code?

A Only the first selector using it updates

B You must manually update each selector

C All selectors using it update automatically

D Nothing changes

Changing a mixin updates all places where it is included, saving time and avoiding errors.

Can mixins accept values to customize styles?

A Yes, they can take parameters

B No, they are fixed blocks

C Only in CSS, not Sass

D Only if you use JavaScript

Mixins can take parameters to make styles flexible and reusable with different values.

Which of these is NOT a benefit of using mixins?

A Reducing code duplication

B Making code easier to maintain

C Customizing styles with parameters

D Automatically fixing browser bugs

Mixins help with code reuse and maintenance but do not fix browser bugs automatically.

Explain in your own words how mixins help reduce repeated CSS code.

Think about writing a style once and using it many times.

Describe how parameters in mixins make them more flexible.

Imagine changing colors or sizes each time you use the same mixin.