What's the difference between Sass functions and Sass mixins

SASS mixins and functions are both used to group CSS declarations together and reuse them throughout your stylesheet, but they have different purposes and uses:

Mixins are used to include a set of styles in multiple places in your CSS. They are defined using the @mixin keyword and can take optional parameters. Mixins are used to encapsulate complex sets of styles, and can be used to apply a set of styles to multiple elements without having to repeat the same code over and over again.

Functions, on the other hand, are used to perform operations and return a value that can be used in a CSS property value. Functions are defined using the @function keyword and can take arguments. Functions are used to perform complex calculations, create dynamic styles, and make your CSS more reusable.

When you use a mixin in your SASS code, it gets replaced by the CSS declarations inside the mixin at the pre-processing stage. This means that if you use the same mixin multiple times in your SASS, it will generate the same set of CSS declarations for each use. This can lead to duplicated CSS code and make your CSS less efficient.

For example, if you have the following mixin:

@mixin button {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #ff0000;
    color: #ffffff;
}

and use it multiple times in your sass like this:

.btn1 {
    @include button;
}

.btn2 {
    @include button;
}

The CSS generated will look like this:

.btn1 {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #ff0000;
    color: #ffffff;
}

.btn2 {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #ff0000;
    color: #ffffff;
}

As you can see, the same set of CSS declarations is repeated for both .btn1 and .btn2.

On the other hand, when you use a function in your SASS code, it gets evaluated and replaced by its returned value at the pre-processing stage. This means that if you use the same function multiple times with the same arguments, it will only generate one set of CSS declarations.

For example, if you have the following function:

@function calculateWidth($padding) {
    @return 100% - ($padding * 2);
}

and use it multiple times in your sass like this:

.container1 {
    width: calculateWidth(20px);
    padding: 20px;
}

.container2 {
    width: calculateWidth(20px);
    padding: 20px;
}

The CSS generated will look like this:

.container1 {
    width: 60%;
    padding: 20px;
}

.container2 {
    width: 60%;
    padding: 20px;
}

As you can see, the width property was calculated only once using the function, and then used multiple times.

In general, it's recommended to use mixins when you need to include a set of styles multiple times, and use functions when you need to perform calculations or generate dynamic styles. This will help you to write more efficient and maintainable code.

Additional resources
  • Frontend web development courses

    Beginner-friendly courses focusing on HTML, CSS, and JavaScript.

    View Courses
  • Frontend web development projects

    Beginner-friendly projects focusing on HTML, CSS, and JavaScript.

    View Projects
  • Free website templates

    Collection of free, high-quality website templates for your next project.

    View Templates