Scss functions and returns

Projects Personal Projects
1

Hello,

having a rough time with scss functions and returns

i undrestand the basics of @mixins, arguments and @include

what is a function?

clarify please

so, what is a return? how do returns work? i know “return” can be defined as to give back… what am i giving back in a scss return?

keep it slow and simple, i am at the beginnig of these concepts

nothing too fancy for now, something i can follow… just the basics of scss functions and returns

and when, under what circumstances, would i write my own functions?

PLEASE give me a few examples of functions and returns

i thank you!

2

A rather useless, but very simple example:

@function add($n1, $n2, $unit: px) {
  @return $n1 + $n2 + $unit;
}
div {
  padding: add(3, 5); // padding: 8px;
}
span {
  padding: add(3, 5, em); // padding: 8em;
}

The Sass docs have a more complex example, that demonstrates the use case of a function a little better:

@function fibonacci($n) {
  $sequence: 0 1;
  @for $_ from 1 through $n {
    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
    $sequence: append($sequence, $new);
  }
  @return nth($sequence, length($sequence));
}

.sidebar {
  float: left;
  margin-left: fibonacci(4) * 1px;
}

nth(), length() and append()are built-in Sass functions. If you don’t think your question is answered, provide a more specific question with sample code, please.