28Creating Your Own Functions

As well as using functions for things such as manipulating lists and maps, and color manipulation, Sass gives you the ability to create your own functions.

Functions are defined similarly to mixins. You define them using the @function directive. Then you can pass in any arguments. Inside the scope of the function, you can perform any number of tasks using standard Sass. The only main difference from a mixin is that you need to use the @return method if you want to make the function return anything.

You can see this in a simple doubling function example. A variable is passed in ($value), and the function returns the variable multiplied by two. When the function is used in the .sidebar class, it outputs 20px rather ...

Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.