Mixins with parameters in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mixin in Sass?

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

beginner

How do you define a mixin with parameters in Sass?

Use @mixin followed by the mixin name and parentheses with parameters inside. Example: @mixin box($color) { background-color: $color; }

beginner

How do you include a mixin with parameters in a selector?

Use @include with the mixin name and pass the arguments in parentheses. Example: @include box(red);

beginner

Why use parameters in mixins?

Parameters let you customize the styles inside the mixin each time you use it, making your code flexible and reusable.

intermediate

What happens if you define a default value for a mixin parameter?

If you don't pass a value when including the mixin, the default value is used automatically.

How do you pass a color parameter to a mixin named button-style?

A button-style(red);

B @mixin button-style(red);

C @include button-style(red);

D @include button-style { red; }

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

What keyword starts the definition of a mixin in Sass?

A @extend

B @include

C @function

D @mixin

@mixin is used to define a mixin.

What is the benefit of using parameters in mixins?

A They make mixins reusable with different values.

B They make CSS load faster.

C They automatically create variables.

D They prevent styles from being applied.

Parameters allow you to reuse mixins with different inputs, making your styles flexible.

If a mixin parameter has a default value, what happens when you don't pass that parameter?

A The default value is used.

B An error occurs.

C The parameter is ignored.

D The mixin is skipped.

Sass uses the default value if no argument is passed.

Which of these is a valid mixin definition with a parameter?

A @function border-radius($radius) { border-radius: $radius; }

B @mixin border-radius($radius) { border-radius: $radius; }

C border-radius($radius) { border-radius: $radius; }

D @include border-radius($radius) { border-radius: $radius; }

Mixins are defined with @mixin and parameters inside parentheses.

Explain how to create and use a mixin with parameters in Sass.

Think about how you make reusable style blocks that accept inputs.

Describe the advantage of giving default values to mixin parameters.

Consider what happens if you forget to pass a value.