Sass TutorialLesson 7Free preview

Sass @mixin

This lesson is part of SASS · All levels

Summary

A mixin is a CSS rule block that can be defined once and then inserted multiple times with @include. Unlike function, the mixin produces CSS declarations such as property or nesting rules. The mixin can also accept parameters so that one block can produce variations in output.

Key points

Mixin is defined by @mixin and used by @include
Mixins can have both value parameters and intrinsic values
The mixin generates CSS code, not a single return value
The mixin is suitable for repeating patterns such as flex centering or button

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.