Why should I use SASS mixin?

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?

FWIW I think this is a useful type of question to ask & get different perspectives on. I once asked a similar one (http://stackoverflow.com/questions/708040/why-would-i-want-to-use-jquery) and really appreciated the thoughtful answers I got. & I came here looking for info on "why use SASS"... — ElBel, Feb 19 '13 at 23:21

score 4 · Accepted Answer · answered Jan 29 '13 at 09:17

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.

Christoph · Answer 2 · 2013-01-29T09:31:28.227

Using mixins has several advantages:

1) To use a class, you actually have to mark all html elements with such a class (=creating unnecessary overhead), a mixin can be an extension of an existing class as well as create additional classes if necessary.

2) Mixins can take parameters, making them highly dynamic and resusable. You only need one parametrized mixin where you needed several classes. (boderradii, colors, transparencies, fontsizes and so on):

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

^{* Example from Sass-Doc}

3) Classes should have semantic meanings. Mixins should be more like codesnippets, able to being used in many different places.

A good and more complex example of all these points I mentioned above is pduersteler's mixin.

score 0 · Answer 3 · answered Jan 29 '13 at 09:19

As an example for mixins; Let's say you have a sprite with icons in a fixed grid. The icons are 32x32px each and you want to generate icons based on that sprite for both 32x32px and 16x16px. That's where a mixin can be quite handy.

@mixin icon($name, $left, $top)
{
  &.#{$name}-16:not(.raw)
  {
    &:before
    {
        float: left;
        content: "";
        width: 16px;
        height: 16px;
        margin-right: 8px;

        background-size: 300px 300px;
        background-image: image_url('icons/sprite_gray.png');
        background-position: -#{$left * 16}px -#{$top * 16}px;
    }

    &:hover:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 1}px; }
    &.active:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 2}px; }
    &.active.contrast:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 3}px; }
  }

  &.#{$name}-16.raw
  {
    width: 16px;
    height: 16px;

    background-size: 300px 300px;
    background-image: image_url('icons/sprite_gray.png');
    background-position: -#{$left * 16}px -#{$top * 16}px;
  }

  &.#{$name}-32:not(.raw)
  {
    &:before
    {
        content: "";
        width: 32px;
        height: 32px;

        background-size: 600px 600px;
        background-image: image_url('icons/sprite_gray.png');
        background-position: -#{$left * 32}px -#{$top * 32}px;
    }

    &:hover:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 1}px; }
    &.active:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 2}px; }
    &.active.contrast:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 3}px; }
  }

  &.#{$name}-32.raw
  {
    display: inline-block;
    width: 32px;
    height: 32px;

    background-size: 600px 600px;
    background-image: image_url('icons/sprite_gray.png');
    background-position: -#{$left * 32}px -#{$top * 32}px;
  }

}

So with this mixin, I can give a name and the position of the icon to create styles, like:

.icon { 
    @include icon(user, 1, 1);
    @include icon(role, 5, 1);
}

which gives me user-16, user-32, role-16, role-32 classes to implement icons.

(In this example, they are appended as :before content, unless you use .raw)

Why should I use SASS mixin?

3 Answers3