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

Unable to prepare route [{fallbackPlaceholder}] for serialization. Uses Closure In Laravel

Install Linux, NGINX, MYSQL, PHP (LEMP Stack) on Ubuntu

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

Prevent Multiple Form Submits

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

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

Why And How To Use PHP PDO With CRUD Examples

Debugging Laravel Queue Email Issues

What Is HTTP? Different HTTP Methods And Status Codes Explained With Examples

Push Files To CPanel / Remote Server using FTP Software FileZilla

Observers In Laravel

Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}

Cache Static Files With NGINX Server

Select2 Dropdown

Install NGINX In Linux / Ubuntu And Managing