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

Articles For You

Accessors & Mutators In Laravel. Problem In Set Attribute While Saving/Updating Data & How To Resolve It

Add Google ADS In AMP (Accelerated Mobile Pages) Website

Securely SSH Your Server & Push Files With FileZilla

Install Linux, Apache, MYSQL, PHP (LAMP Stack) on Ubuntu

Localization In Laravel REST API

What Is Composer? How Does It Work? Useful Composer Commands And Usage

Foreign Key Migrations Simplified In Laravel 7.x

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

Writing Clean Code In PHP

Generate Sitemap in PHP Laravel

Client-Side DataTable, Adding Super Powers To HTML Table

Stripe Payment Integration With Laravel

Facebook Login With PHP Laravel Socialite

PHP Built-In Web Server & Testing Your Development Project In Mobile Without Any Software

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