Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Difference between Mixins and Functions

When should I use Mixins and when Functions?

2 Answers

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.

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.