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

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

Composer Install v/s Composer Update

Select2 Dropdown

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

Relationship Table Data With Route Model Binding In Laravel

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

Securely SSH Your Server & Push Files With FileZilla

Random Rows In Laravel

Create A Composer Package? Test It Locally And Add To Packagist Repository

Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages

Client-Side DataTable, Adding Super Powers To HTML Table

Generate SSH Key with ssh-keygen In Linux / Unix

NGINX Security Best Practices & Optimization

Plain PHP Resumable Large File Uploads In Chunks Using FlowJs

Lazy Load Images In Chrome With This Simple Trick