Sass @function Rule (original) (raw)

Last Updated : 14 Jul, 2020

Functions can define complex operations on SassScript values that can be reused throughout the stylesheet. It makes it easier to abstract out the common formulas and behaviors in some readable way. Functions can be defined using @function at-rule.Syntax:

html `

@function (<arguments...>) { ... }

A function name can be any Sass identifier. It must only contain universal statements, as well as the @return at-rule which indicates the value to use result of the function call. The normal CSS functions are used for calling functions.Example:

html `

@function power($base, $expo) $result: 1 @for from1through_ from 1 through from1throughexpo result:result: result:result * $base @return $result

.sidebar float: right margin-left: power(6, 2) * 2px

Output:

.sidebar { float: right; margin-left: 64px; }

Arguments: Arguments allow the function's behavior to be changed every time that they’re called. The arguments are specified in the @function rule after the function name as shown in the syntax. It is simply a list of variable names surrounded by parentheses or curly brackets. The functions are always called with the same number of arguments which are in SassScript expressions. The values of these expressions are available within the function body as the corresponding variables.Types of arguments:

Optional Arguments:Example: html @function gfg($color, $amount: 100%) { <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>g</mi><mi>e</mi><mi>e</mi><mi>k</mi><mi>s</mi><mo>:</mo><mi>c</mi><mi>h</mi><mi>a</mi><mi>n</mi><mi>g</mi><mi>e</mi><mo>−</mo><mi>c</mi><mi>o</mi><mi>l</mi><mi>o</mi><mi>r</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">geeks: change-color(</annotation></semantics></math>geeks:change−color(color, <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>h</mi><mi>u</mi><mi>e</mi><mo>:</mo><mi>h</mi><mi>u</mi><mi>e</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">hue: hue(</annotation></semantics></math>hue:hue(color) + 180); @return mix($geeks, <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>c</mi><mi>o</mi><mi>l</mi><mi>o</mi><mi>r</mi><mo separator="true">,</mo></mrow><annotation encoding="application/x-tex">color, </annotation></semantics></math>color,amount); } $primary-color: #ffffff; .header { background-color: gfg($primary-color, 80%); } Output:
.header {
background-color: white;
}
Arbitrary Arguments:Example: html $lengths: 50px, 30px, 100px; .gfg { width: max($lengths...); } Output:
.gfg {
width: 100px;
}
Keyword Arguments:Example: html $geeks: green; .banner { background-color: $geeks; color: scale-color($geeks, $lightness: +40%); } Output:
.banner {
background-color: green;
color: #1aff1a;
}

@return: The @return at-rule gives the value to be used as the result of the called function. It is only valid in the @function rule, and every @function must end with @return. When @return is called, it immediately ends the function and returns the result. Returning early are very useful for handling edge-cases. Its also useful in cases where an efficient algorithm is available without wrapping the entire function in an @else block.Example:

html `

@function add($numbers...) { $add: 0; @each numberinnumber in numberinnumbers { add:add: add:add + $number; } @return $add; }

.gfg { width: add(50, 30, 100); }

Output:

.gfg { width: 180; }