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

Install Linux, Apache, MYSQL, PHP (LAMP Stack) on Ubuntu

Proper Way To Validate MIME Type Of Files While Handling File Uploads In PHP

PHP file_put_contents failed to open stream: Permission denied

Resolve 404 Not Found In NGINX

Integrate Google Translate Into Your Website

Dependency Dropdowns With Javascript And PHP

Sass or SCSS @mixin vs @extends vs Placeholder (%)

SQLite Doesn't Support Dropping Foreign Keys in Laravel

Generate Fake Data In PHP With Faker

TRUNCATE vs DELETE In MySQL

PHP extension ext-intl * is missing

Free SSL Certificate In cPanel With ZeroSSL & Certbot

Supervisor For Laravel Queue Scheduling

Localization In Laravel REST API

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