What is the difference between a mixin and a function in SASS

Although the two have almost the same purpose, they have a small difference, where mixin serves more to include a block of code while the function serves more returns a value.

What is the real difference between mixins and functions?

Mixin Example:

Following mixin can accept arguments and make calculations. The output of this mixin (in this case) is a CSS rule and will be placed wherever you include it.

@mixin my-mixin($some-number) {
  padding: $some-number;
  margin: $some-number;
}

Now let's use the include directive to enter the mixins code.

.my-module {
  @include my-mixin(10px);
}

And here is the CSS output code.

.my-module {
  padding: 10px;
}

Function Example:

A function is very similar to a mixin, however, the output from a function is a single value. This can be any Sass data type, including: numbers, string, colors, booleans, or lists.

The following function can accept 2 arguments, $ some-number and $ another-number. The value returned by these two variables are added together.

@function my-calculation-function($some-number, $another-number){
  @return $some-number + $another-number
}

This time, we will replace the common value of the padding property with a snippet of SassScript to call our function, pass them arguments and include in our output CSS code.

.my-module {
  padding: my-calculation-function(10px, 5px);
}

And here is the CSS output code.

.my-module {
  padding: 15px;
}

This link below shows some more good examples of this besides what I mentioned here:

Using pure Sass functions to make reusable logic more useful

Note that in the example you cited, it is not possible to return several properties as in the mixins:

@function border-default($color) {
   @return border: 1px solid $color:
}


@mixin my-mixin($some-number) {
  padding: $some-number;
  margin: $some-number;
}

Both have almost the same function, as does @extend - although it has a slightly more% output (more related to performance issues and DRY I would say).

Generally speaking, this is the difference between the two:

• @mixin : Used to return a block of code;
• @function : Used to return a value through @return following method SASS

What will differentiate a @mixin from a @function , is the purpose to which it is being used, including using both in the same call.

Example:

.minha_classe {
    @include shadow(true, #000);
}

@mixin shadow($material, $cor) {
    box-shadow: calcShadow($material, $cor);
}

@function calcShadow($material, $cor) {
    @if $material {
        @return 0 3px 6px rgba($cor, .24);
    } @else {
        @return 0 5px 10px rgba($cor, .86);
    }
}

Although you can merge @mixin with @function and create only one calculation block and return, this way you keep your code more organized and, if you need to do the same calculation on another occasion, call the function instead of creating a new @mixin (or @function ) for that purpose exclusively.

I've particularly used @function to generate animations, where I determine, for example, the direction and amplitude, return the values and set the code.

Complementary

Complementing with @mixin there is @extend which generates a output of css similar, but different. This sim has a performance impact and a greater difference in use. If you are interested, I also recommend looking for more information about it.