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% ));
}

Articles For You

Create Gmail App Password For SMTP Mails

Install MySQL In Ubuntu 20.04

Client-Side Form Validation With Javascript

Laravel Custom Maintenance Page

GitHub Login With PHP Laravel Socialite

Generate RSS Feeds in PHP Laravel

URL Redirects From Called Functions In Laravel

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

@stack @push and @prepend In Laravel Blade

Manipulate HTML Using DOMDocument In PHP

PHP extension ext-intl * is missing

Plain PHP Resumable Large File Uploads In Chunks Using FlowJs

Why And How To Use PHP PDO With CRUD Examples

Debugging Laravel Queue Email Issues

PHP file_put_contents failed to open stream: Permission denied