Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.







Sass or SCSS @mixin vs @extends  vs Placeholder (%) | StackCoder


Sass or SCSS @mixin vs @extends vs Placeholder (%)


14th October 2020 2 mins read
Share On     Share On WhatsApp     Share On LinkedIn


In the previous article we got to know in depth understanding of Sass/SCSS and how to use it.


If you are still new to Sass/SCSS then I recommend to check out my in depth article Sass or SCSS In-Depth Tutorial


In this article, I will be covering the difference between @mixin, @extends, and Placeholder.


@mixin


When you use the @mixin in the code it will replicate the code in all the using blocks


Example - 

@mixin wrapper{
  margin:0px auto;
  padding: 0px;
}

.w1{
  @include wrapper;
}

.w2{
  @include wrapper;
}

will be compiled to the following

.w1 {
  margin: 0px auto;
  padding: 0px;
}

.w2 {
  margin: 0px auto;
  padding: 0px;
}


The styles in the .w1 and .w2 styles is redundant


To overcome this problem we will use the @extend


@extend


Example

wrapper{
  margin:0px auto;
  padding: 0px;
}

.w1{
  @extend wrapper;
}

.w2{
  @extend wrapper;
}


will be compiled to the following


wrapper, .w1, .w2 {
  margin: 0px auto;
  padding: 0px;
}


Here the styles are not redundant, @extend is intelligent enough and adds wrapper,.w1,.w2

But there is one problem with this, if I don't use wrapper in my project then we are simply adding the redundant code in our style.


So to overcome this we will use Placeholder (%)


Placeholder (%)


Example -

%wrapper{
  margin:0px auto;
  padding: 0px;
}
.w1{
  @extend %wrapper;
}
.w2{
  @extend %wrapper;
}


will be compiled to the following


.w1, .w2 {
  margin: 0px auto;
  padding: 0px;
}







Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing