SCSS what are mixins, extends and placeholders

Initially I used LESS for most of my CSS pre-processing, but due to its lazy load structure I started using SCSS which in my opinion is a much more structured and functional compiler.

The basic SCSS logic works along the using the following architecture - @mixin, @extend and placeholders. However there are differences between them and specific use cases. Here is a little breakdown of how they each work.

placeholders

Placeholders are a nice way of extending a class. The pre-processor skips %example-placeholders and therefore doesn't include it in the compiled css.

%example-placeholders {
    font-weight: 900;
    color: #FF00FF;
}

body {
    @extend %example-placeholders;
}

h1 {
    @extend %example-placeholders;
}

The css output is:

body, h1 {
    font-weight: 900;
    color: #FF00FF;
}

@mixin

With a @mixin it works more like a function where you can define a style. A simple example would be below.

@mixin example-mixin {
    font-weight: 900;
}

body {
    @include example-mixin;
}

h1 {
    @include example-mixin;
}

The css output is:

body, h1 {
    font-weight: 900;
}

But like a function you can also send arguments which makes the @mixins more powerful - so here is the example as above but passing a value.

@mixin example-mixin ($property) {
    font-weight: $property;
}

body {
    @include example-mixin(900);
}

h1 {
    @include example-mixin(800);
}

The css output is:

body {
    font-weight: 900;
}

h1 {
    font-weight: 800;
}

NOTE: You can also pass more than one value to the @mixin.

These can make it very powerful and also cut out a lot of tedious repetitive legwork, so if I had to use border-radius for cross browsers this would be the best option using @mixins.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.container {
    @include border-radius(10px);
}

The css output is:

.container {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

From my experience this is where it has an advantage over LESS, and the use of global functions that can be called anywhere.

@extend

With @extend it allows one style to inherit styles from its selector. So the basic usage would be.

.example-extend {
    font-weight: 900;
    color: #FF00FF;
}
.example-extended {
    @extend .example-extend;
}

And would output.

.example-extend, .example-extended {
    font-weight: 900;
    color: #FF00FF;
}

Another more complicated example would be.

.example-extend {
    padding: 10px;
    h3 {
        font-weight: 900;
        color: #FF00FF;
    }
}

.example-extended {
    @extend .module;
}

This would output.

.example-extend, .example-extended {
    padding: 10px;
}
.example-extend h3, .example-extended h3 {
    font-weight: 900;
    color: #FF00FF;
}

Conclusion

SCSS is a greate way of making a cleaner/quicker workflow and is relatively easy to learn. Now the @mixin, @extend and placeholders all have their own pros and cons, but guaranteed it will make life easier for any developer.