Mixin definition with @mixin in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a @mixin in Sass?

A @mixin is a reusable block of CSS styles in Sass. It lets you write styles once and include them wherever needed, saving time and avoiding repetition.

beginner

How do you define a mixin named button-style in Sass?

You write @mixin button-style { /* styles here */ }. Inside the curly braces, you put the CSS rules you want to reuse.

beginner

How do you include a mixin in a CSS rule?

Use @include mixin-name; inside the CSS selector where you want the styles to appear.

intermediate

Can mixins accept parameters? Why is this useful?

Yes, mixins can take parameters to customize styles. This makes them flexible, like a recipe where you can change ingredients to get different results.

intermediate

What is the difference between a mixin and a placeholder selector in Sass?

Mixins can include CSS and accept parameters, and you include them with @include. Placeholders are like invisible selectors used with @extend and can't take parameters.

What keyword do you use to define a mixin in Sass?

A @function

B @include

C @extend

D @mixin

You define a mixin with @mixin. @include is used to add the mixin styles.

How do you add a mixin's styles inside a CSS rule?

A @mixin mixin-name;

B @extend mixin-name;

C @include mixin-name;

D @use mixin-name;

Use @include mixin-name; to insert the mixin's styles.

Which of these is a benefit of using mixins?

A Automatically minify CSS

B Write CSS only once and reuse it

C Replace HTML tags

D Create JavaScript functions

Mixins let you write CSS once and reuse it, saving time and avoiding repetition.

How do you define a mixin to accept a parameter named color?

A @mixin example($color) { ... }

B @include example(color) { ... }

C @mixin example { color: color; }

D @include example { color: color; }

You define the mixin with parameters like @mixin example($color) { ... } to use the parameter inside.

Which Sass feature is best for reusable styles that need parameters?

A Mixins

B Functions

C Variables

D Placeholder selectors

Mixins can take parameters and include reusable styles, making them ideal for this.

Explain what a mixin is in Sass and how it helps in writing CSS.

Think of a mixin like a reusable recipe for CSS styles.

Describe how to define a mixin with parameters and how to use it in your styles.

Parameters let you customize the mixin each time you use it.