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

Question

In the Sass we have two cases of reusable code snippet: function and mixin.

Function example:

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

Mixin example:

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

Not taking into account that one uses return and the other not, which is the most striking difference between a function and a mixin?

Answer 1

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

What is the real Difference between mixins and functions?

Mixin example:

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

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

Now let’s use the include directive to insert the mixins code.

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

And here’s the output CSS code.

.my-module {
  padding: 10px;
}

Example Function:

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

The following function can accept 2 arguments, $some-number and $Another-number. The returned value of these two variables is 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 what a chunk of Sassscript to call our function, pass arguments and include in our output CSS code.

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

And here’s the output CSS 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 mentioned, it is not possible to return several properties as in mixins:

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


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

Answer 2

Both have almost the same function, as well as the @extend - despite having a output slightly more differentiated (more related to performance issues and DRY I would say).

Roughly speaking, this is the difference between basic:

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

What will differentiate one @mixin of a @function, is the purpose for 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 the @mixin with the @function and create only a block of calculation and return, this way you keep your code more organized and, if at another time it is necessary to do the same calculation, just call the function instead of creating a new one @mixin (or @function) for that purpose exclusively.

---

I, particularly, have used more @function to generate animations, where I determine, for example, the direction and amplitude, return the values and assemble the code.

---

Complimentary

Complement to @mixin there is the @extend that generates a output of css similar but different. This yes has an impact on performance and a greater difference in use. If you are interested, I also recommend getting more information about it.