Tag: Functions

Functions in SASS

Another cool feature in SASS is that we can create functions for our CSS. In the following code, I am creating a function to be able to dynamically create a linear gradient with custom opacity. Please check it out.

@function linear-gradient($pos, $gradients...) {
  $type: linear;
  $pos-type: type-of(nth($pos, 1));

  // if $pos doesn't exist, fix $gradient
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $gradients: zip($pos $gradients);
    $pos: false;

  $type-gradient: $type, $pos, $gradients;
  @return $type-gradient;

This is how you call the function

@include background(linear-gradient(top, orange, red));