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

Install NGINX In Linux / Ubuntu And Managing

GitHub Login With PHP Laravel Socialite

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

Route Model Binding In Laravel & Change Default Column id To Another Column

New Features In Laravel 8

Client-Side DataTable, Adding Super Powers To HTML Table

Install Packages Parallel For Faster Development In Composer

Custom Validation Rules In PHP Laravel (Using Artisan Command)

Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench

Generate Fake Data In PHP With Faker

Lazy Load Images In Chrome With This Simple Trick

Setup AMP (Accelerated Mobile Pages) In PHP Laravel

Increase Session Timeout In Laravel

Upload Image In PHP?

Free SSL Certificate With Lets Encrypt/Certbot In Linux (Single / Multiple Domains)