Functions vs mixins comparison in SASS - Quick Revision & Key Differences

Recall & Review

beginner

What is a function in Sass?

A function in Sass is a reusable block of code that returns a single value, like a color or number, which you can use in your styles.

beginner

What is a mixin in Sass?

A mixin is a reusable block of styles that you can include in other selectors. It can add multiple CSS properties at once.

intermediate

How do functions and mixins differ in what they output?

Functions return a single value (like a color or number), while mixins output CSS rules directly into your stylesheet.

beginner

Can mixins accept parameters in Sass?

Yes, mixins can take parameters to customize the styles they add, making them flexible and reusable.

intermediate

When should you use a function instead of a mixin in Sass?

Use a function when you need to calculate and return a value to use inside other CSS properties, not to output styles directly.

What does a Sass function return?

A A single value like a color or number

B Multiple CSS rules

C An HTML element

D Nothing, it just runs code

Functions return a single value that you can use inside your CSS.

Which Sass feature outputs CSS rules directly into your stylesheet?

A Mixin

B Function

C Variable

D Placeholder selector

Mixins output CSS rules directly where they are included.

Can mixins accept parameters to customize their output?

A Only functions can

B Yes

C No

D Only variables can

Mixins can take parameters to change the styles they add.

When should you use a Sass function?

A To output multiple CSS rules

B To define variables

C To calculate and return a value

D To include HTML code

Functions are for calculating and returning values, not for outputting CSS rules.

Which of these is NOT true about Sass mixins?

A They help avoid repeating code

B They can include multiple CSS properties

C They can accept parameters

D They return a single value

Mixins do not return a single value; they output CSS rules.

Explain the main differences between Sass functions and mixins.

Think about what each one outputs and how you use them in your styles.

Describe a situation where you would choose a mixin over a function in Sass.

Consider when you want to add actual CSS code, not just a value.