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

Push Files To CPanel / Remote Server using FTP Software FileZilla

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

Manipulate HTML Using DOMDocument In PHP

Sass or SCSS @function vs @mixin

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

Setup MAMP Virtual Hosts For Local PHP Development

Client-Side Form Validation With Javascript

Free SSL Certificate For CPanel

Make Laravel Controllers Slim By Skimming Form Validation Request

Add Google ADS In AMP (Accelerated Mobile Pages) Website

GitHub Login With PHP Laravel Socialite

Getting Started With AMP (Accelerated Mobile Pages)

Relationship Table Data With Route Model Binding In Laravel

Foreign Key Migrations Simplified In Laravel 7.x

Simple Way To Create Resourceful API Controller In Laravel