SASS – Lesson 4 : Mixins and Functions

Mixins

A mixin is a piece of customizable and reusable code anywhere in your SASS file. Like a function, a mixin can take parameters.

Mixin with parameters

Thanks to mixins, you will be able to generate several dozen lines of CSS with a single (configurable or not) line in SCSS !

Example :

Compiled CSS file:

SASS does not integrate any predefined mixin. However, this is one of the strengths of Compass, which offers a hundred mixins ready to use: Compass Mixins.

Functions

The difference between a mixin and a function is the result returned once compiled. A mixin can generate several lines of CSS code while a function will only return a value.

Thanks to functions, you will be able to calculate the percentage of a block, convert a “px” unit to “em/rem,” or even lighten a color.

Find the complete list of SASS and Compass functions.