Function definition with @function in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of @function in Sass?

@function lets you create reusable blocks of code that return a value. It helps you calculate values dynamically in your stylesheets.

beginner

How do you return a value from a Sass function?

Use the @return keyword followed by the value you want to send back from the function.

beginner

Write a simple Sass function that adds two numbers.

<pre>@function add($a, $b) {
  @return $a + $b;
}</pre>

beginner

Can Sass functions accept parameters? How?

<p>Yes, Sass functions can accept parameters inside parentheses after the function name, like <code>@function name($param1, $param2)</code>.</p>

beginner

Why use Sass functions instead of plain CSS?

<p>Sass functions let you do math and logic to create dynamic styles, saving time and avoiding repetitive code.</p>

What keyword starts a function definition in Sass?

A @function

B @mixin

C @include

D @return

@function is used to define a function in Sass.

How do you send a value back from a Sass function?

A @yield

B @send

C @output

D @return

@return sends the result back from the function.

Which of these is a valid Sass function parameter list?

A [width, height]

B ($width, $height)

C {width, height}

D <width, height>

Sass uses parentheses with dollar sign variables for parameters.

What will this Sass function return?<br>

@function double($n) { @return $n * 2; }

A The input number plus 2

B The input number divided by 2

C The input number multiplied by 2

D The input number minus 2

The function multiplies the input by 2 and returns it.

Why use Sass functions instead of CSS variables?

A Functions can calculate values dynamically

B CSS variables can do math

C Functions are slower

D CSS variables are deprecated

Sass functions let you do calculations and logic, which CSS variables alone cannot do.

Explain how to create and use a function in Sass with an example.

Think about how you write a function in programming but for styles.

Describe the benefits of using Sass functions in your stylesheets.

Why would you want to do math or logic in your styles?