In sass we can add our logic for calculation which is not possible in CSS. By the help of mixins and functions in sass we can add reusable logic.

Sass has mixins, we all know that. Instead of outputting lines of Sass the way mixins do, functions return a value. This makes them a super powerful behind-the-scenes player in Sass recipes.

Functions and mixins are very similar in nature. Because they can both accept variables. In the following examples, we review the creation, usage and output of both a mixin and a function.

Mixin:

The following mixin can accept arguments and do calculations. This will be available where ever you @include it.

@mixin font-size-mixin($size-value) {
  font-size: $size-value;
}

use @include directive add mixin’s code in some class:

.summary-para {
  @include font-size-mixin(12px);
}

The final outcome of above code is:

.summary-para {
  font-size: 12px;
}

Function:

Function is similar to mixin, however the output from a function is single value. The following function will accept 2 arguments and will return sum of both arguments.

@function sum-function($first-value, $second-value){
  @return $first-value + $second-value
}

Now instead of using @include we simply call this method.

.combination-para {
  padding: sum-function(5px, 7px);
}

and the out put will be:

.combination-para {
  padding: 12px;
}