Question

I know I can use mixins in order to extend sass classes with some common used styles.
On the other side, I can just do it with a class and set it for the relevant html element.

• So why should I use it?
• Which cases would you recommend to use it in?
• It has any advantage?
• Is it considered as a standard?

Answer 1

You use a mixin when you don’t always want the same values to be applied to a selector.

For instance if you want to make something with rounded corners you would create a mixin that accepts a “radius” parameter:

=borderRadius($value)
  border-radius: $value
  -webkit-border-radius: $value
  -moz-border-radius: $value
  -o-border-radius: $value

Then somewhere else you could do:

.selector1
  +borderRadius(5px)

.selector2
  +borderRadius(10px)

This is basically DRY. Ti makes the code more maintainable and once you don’t need to support Opera, for example, you would just remove -o-border-radius in one place instead of searching all your files and removing it from multiple places.