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 @function & @mixin.
Functions are useful specifically because they return values. Mixins are nothing like functions--they usually just provide valuable blocks of code.
Usually, there are cases where you might have to use both.
@function returns the value
@function makelongshadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 200 {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}
@mixin doesn't return any values
@mixin longshadow($color) {
text-shadow: makelongshadow($color);
}
h1 {
@include longshadow(darken($color, 5% ));
}
@stack @push and @prepend In Laravel Blade
Create Custom 404 Page In Laravel
Create Gmail App Password For SMTP Mails
Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}
Generate Sitemap in PHP Laravel
Facebook Login With PHP Laravel Socialite
Securely SSH Your Server & Push Files With FileZilla
Create Zip File On The Fly With Streaming Download In PHP Laravel
Integrate Google Translate Into Your Website