Including mixins with @include in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mixin in Sass?

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

beginner

How do you include a mixin in Sass?

You use the @include directive followed by the mixin name and optional arguments.

beginner

Example: What does @include rounded-corners; do?

It inserts the styles defined inside the rounded-corners mixin into the current CSS rule.

intermediate

Can mixins accept parameters in Sass?

Yes, mixins can take parameters to customize the styles when included.

beginner

Why use @include instead of copying styles?

Using @include keeps your code DRY (Don't Repeat Yourself), easier to maintain, and reduces errors.

What does @include do in Sass?

A Inserts styles from a mixin into a selector

B Defines a new mixin

C Imports another Sass file

D Creates a CSS variable

@include inserts the styles from a previously defined mixin into the current CSS rule.

How do you pass a parameter to a mixin when using @include?

A @include mixin-name(parameter);

B @include mixin-name: parameter;

C @include mixin-name { parameter }

D @include mixin-name = parameter;

You pass parameters inside parentheses after the mixin name, like @include mixin-name(parameter);.

Which of these is the correct way to include a mixin named box-shadow?

A @import box-shadow;

B @mixin box-shadow;

C @include box-shadow;

D @use box-shadow;

@include box-shadow; is the correct syntax to include a mixin.

What is the main benefit of using mixins with @include?

A To repeat the same styles easily

B To write less CSS and keep code organized

C To create animations

D To link external CSS files

Mixins help write less CSS by reusing style blocks, keeping code clean and organized.

If a mixin has parameters, what happens if you don’t provide them when using @include?

A Sass throws an error

B The CSS breaks

C The mixin is ignored

D Default parameter values are used if defined

If default values are set for parameters, Sass uses them when you don’t provide arguments.

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

Think about how to write reusable style blocks and then apply them.

Why is using @include with mixins better than copying CSS styles multiple times?

Consider the idea of writing once and using many times.