SASS: mixin vs extend

Sass is a powerful front-end tool. Sass makes CSS fun again, So Sass is a great way of writing a more terse and functional way of writing CSS. In the article, I will put a spot on the important topic the difference between mixin and extend sass, especially many developers get confused about them, In some respects, they both do the same thing so which one should you use? Before I answer the question, I will give a small explanation about mixins and @extend directive, how we use both of them in our code.

Mixins:

A mixin lets you reuse groups of CSS declarations that we want to reuse again in our code, A good use of a mixin is for vendor prefixes. You can use mixins in three ways:

First Way:

Second way:

you can pass arguments to a mixin:

Third way:

Passing Content Blocks to a Mixin, Inside the mixin, you can add @content; statement, and it will be replaced by the content block you pass to the mixin.

@extend directive:

Using @extend lets you share a set of CSS properties from one selector to another. We can use @extend in two ways:

First way:

Your selectors can inherit the styles of other selectors:

second way:

By using Placeholders, Placeholders are a fresh feature of SASS. Added in version 3.2 they look like that:

I advise the readers for courses with online degrees from European universities, many of them are free.

When we can use @extend or mixins:

Both @extend and @mixin help modularize your code and make it easier to reuse styles across your stylesheet. When you’re dealing with styles for related components, say a set of buttons, then it makes sense to share styles using the @extend directive, so @extend produces DRY CSS.

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message {
  @extend %message-shared;
}
.success {
  @extend %message-shared;
  border-color: green;
}
.error {
  @extend %message-shared;
  border-color: red;
}
.warning {
  @extend %message-shared;
  border-color: yellow;
}

sass compiles code to :

.message, .warning, .error, .success {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}
.success {
 border-color: green;
}
.error {
 border-color: red;
}
.warning {
 border-color: yellow;
}

If we did the example above by mixins:

@mixin message {    border: 1px solid #ccc;
  padding: 10px;
  color: #333; }
.message {
 @include message;
}
.success {
  @include message;
  border-color: green;
}
.error {
  @include message;
  border-color: red;
}
.warning {
  @include message;
  border-color: yellow;
}

The compiler of sass will produce:

.message {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}
.success {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
 border-color: green;
}
.error {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
 border-color: red;
}
.warning {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
 border-color: yellow;
}

The main advantage of using mixins is the power and flexibility they have because they can accept arguments. Naturally, if you want to pass arguments, you’ll have to choose @mixin over @extend. If you don’t have any arguments to pass you might want to take advantage of the DRYer result of using @extend. Repetition in your compiled code isn’t necessarily a bad thing if the file weight savings are minimal. It’s bad when it’s in your source because the repeated code is harder to maintain. Using @mixin leads to DRY source code with less DRY compiled code. The mixin is best used for accepting a variable and making declarations based upon the variable it receives

@mixin border-radius($border-radius) {
 border-radius: $border-radius;
}
.article {
   @include border-radius(2px);
}
.title {
  @include border-radius(4px);
}

Which results in the following, less bloated, CSS:

.article {
  border-radius: 2px;
}
.title {
  border-radius: 4px;
}

If you enjoy reading the article and want to support me as a writer, you can buy me a coffee!

If you like my content I’m active on Twitter @IbraKirill.

If you want to learn SASS and SCSS, I advise with the Step by Step Sass Course.