Sass @function Rules

Last Updated:

Sass @function Rules

@function allows you to define complex operations on SassScript values that you can re-use throughout your stylesheet.

Note: Each @function must end with a @return.

Sass @function With Parameter

Example

SASS TO CSS CONVERTER
@function myFunction($x){ $result: $x * 2; @return $result; } footer ul{ font-size: myFunction(8) * 1px; }

Syntax

@function functionName($a, $b){ // function block };

Sass @function With Optional Parameter

Example

SASS TO CSS CONVERTER
@function myFunction($x, $mul: 2){ $result: $x * $mul; @return $result; } footer ul{ // try myFunction(8, 3) font-size: myFunction(8) * 1px; }

Share this Page

Meet the Author