Sass or SCSS @function vs @mixin

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

@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

@mixin doesn't return any values

@mixin longshadow($color) {
  text-shadow: makelongshadow($color);
}

---

Usage

h1 {
    @include longshadow(darken($color, 5% ));
}

Random Articles For You

Multiple File Uploads In Laravel PHP

Global Data In All Laravel Blade Pages

Facebook Login With PHP Laravel Socialite

Setup AMP (Accelerated Mobile Pages) In PHP Laravel

Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It

Generate Sitemap in PHP Laravel

Free SSL Certificate In cPanel With ZeroSSL & Certbot

Laravel 7.x Multiple Database Connections, Migrations, Relationships & Querying

Foreign Key Migrations Simplified In Laravel 7.x

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

Testing Laravel Emails With MailHog

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

Cache Static Files With NGINX Server

Send SMS With Amazon SNS (Simple Notification Service) Using PHP

Responsive YouTube Videos