
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.
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.
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
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.
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;
}
Composer Install v/s Composer Update
Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}
Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench
Facebook Login With PHP Laravel Socialite
Unable to prepare route [{fallbackPlaceholder}] for serialization. Uses Closure In Laravel
Relationship Table Data With Route Model Binding In Laravel
What Is HTTP? Different HTTP Methods And Status Codes Explained With Examples
Resolve 404 Not Found In NGINX
Plain PHP Resumable Large File Uploads In Chunks Using FlowJs
Why namespace And use Keywords Used In PHP
Free SSL Certificate In cPanel With ZeroSSL & Certbot
Detect AdBlocker With Javascript And Increase Website Ads Revenue