Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.







Sass or SCSS @function vs @mixin | StackCoder


Sass or SCSS @function vs @mixin


14th October 2020 1 min read
Share On     Share On WhatsApp     Share On LinkedIn


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







Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing