@return statement in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @return statement do in Sass?

It sends a value back from a Sass function to where the function was called. This lets you use the result in your styles.

beginner

How do you write a simple Sass function that returns a color?

You define the function with @function, then use @return to send back the color.<br>

@function primary-color() {<br>  @return #3498db;<br>}

intermediate

Can @return send back any type of value in Sass?

Yes, it can return colors, numbers, strings, lists, maps, or booleans from a function.

intermediate

What happens if a Sass function does not have a @return statement?

The function returns null by default, which means no value is sent back.

beginner

Why is @return important in Sass functions?

It lets you create reusable code that calculates values once and sends them back to use anywhere in your styles.

What keyword do you use in Sass to send a value back from a function?

A @send

B @yield

C @return

D @output

The @return keyword is used to send a value back from a Sass function.

What type of value can @return NOT send back in Sass?

A Functions

B Numbers

C Colors

D Strings

@return can send back colors, numbers, strings, lists, maps, and booleans, but not functions themselves.

What happens if a Sass function has no @return statement?

A It returns <code>null</code>

B It throws an error

C It returns <code>0</code>

D It returns the last variable

Without @return, a Sass function returns null by default.

Where do you use the value sent back by @return?

A Inside the function only

B In comments

C In a different file only

D Where the function is called

The returned value is used where the function is called in your Sass code.

Which of these is a correct way to return a value in a Sass function?

A return 10px;

B @return 10px;

C send 10px;

D @yield 10px;

In Sass, you use @return followed by the value and a semicolon.

Explain how the @return statement works in Sass functions and why it is useful.

Think about how functions give back results to use later.

Write a simple Sass function that returns a color using @return and describe what happens when you call it.

Start with @function, then @return the color.