Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Getting Modular with Mixins and Functions Background Image Mixin

Posted by Magnus Martin
Magnus Martin
44,123 Points

Difference between Mixins and Functions

When should I use Mixins and when Functions?

2 Answers

mikes02
mikes02
Courses Plus Student 16,968 Points

This article is very helpful Using pure Sass functions to make reusable logic more useful

They are very similar, but that article should help clarify things for you.

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

I'm a student and not a moderator, but from my understanding these the major differences ....

  1. The way they are accessed
    • Use the @include directive to access a mixin
    • Functions are called e.g.) palette(grey);
  2. What they return
    • Mixins usually provide valuable blocks of code often setting several values
    • Functions @return only a single value
  3. Functions can use math operators to compute values, Mixins can't 4.Functions can loop thru objects, and create cool things like button sets, or themes. Mixins can't
  4. Depending on the situation, you may even want to use a mixin and function together.

There are probably more differences, but these are the main ones I know of.

mikes02 provided a nice link which is also helpful.