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

URL Redirects From Called Functions In Laravel

Send SMS With Amazon SNS (Simple Notification Service) Using PHP

Random Rows In Laravel

SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel

Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages

GitHub Login With PHP Laravel Socialite

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

Basic Server Security Setup For Ubuntu / Linux

Upload Image In PHP?

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

Comment And Like System Using Disqus

What Is Laravel Resourceful Controllers?

Send Email In PHP With PHPMailer

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

Firebase Cloud Messaging (FCM) Browser Web Push Notifications Using Javascript And PHP