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

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;
}

Random Articles For You

Use Different PHP Versions In Ubuntu / Linux

New Features In Laravel 8

Setup MAMP Virtual Hosts For Local PHP Development

Relationship Table Data With Route Model Binding In Laravel

Redirect www to a non-www Website Or Vice Versa

Make Laravel Controllers Slim By Skimming Form Validation Request

Facebook Login With PHP Laravel Socialite

Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}

Create Zip File On The Fly With Streaming Download In PHP Laravel

Create / Save / Download PDF From Blade Template In PHP Laravel

Securely SSH Your Server & Push Files With FileZilla

Foreign Key Migrations Simplified In Laravel 7.x

Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software

Detect AdBlocker With Javascript And Increase Website Ads Revenue

Lazy Load YouTube And Other Videos In Website