Functions with parameters in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a function with parameters in Sass?

A function with parameters in Sass is a reusable block of code that takes inputs (parameters) to perform calculations or return values based on those inputs.

beginner

How do you define a function with parameters in Sass?

Use <code>@function</code> followed by the function name and parentheses containing parameters. Example: <code>@function double($number) { @return $number * 2; }</code>

beginner

Why use parameters in Sass functions?

Parameters let you pass different values to the function each time you use it, making your code flexible and reusable.

beginner

What does this Sass function do?<br><pre>@function add($a, $b) { @return $a + $b; }</pre>

It takes two numbers, $a and $b, and returns their sum.

beginner

How do you call a Sass function with parameters?

Use the function name followed by parentheses with arguments. Example: width: add(10px, 5px); calls the add function with 10px and 5px.

How do you define a function with parameters in Sass?

A function name($param) { ... }

B @mixin name($param) { ... }

C def name($param) { ... }

D @function name($param) { ... }

In Sass, functions are defined using @function followed by the name and parameters in parentheses.

What does the parameter in a Sass function do?

A Imports another Sass file

B Stores a value passed to the function

C Creates a new CSS selector

D Defines a CSS property

Parameters hold values passed into the function to be used inside it.

What keyword returns a value from a Sass function?

A return

B yield

C @return

D output

Sass uses @return to send back a value from a function.

How do you call a function named 'multiply' with parameters 3 and 4 in Sass?

A multiply(3, 4)

B @include multiply(3, 4)

C multiply 3, 4

D @function multiply(3, 4)

Functions are called by their name with arguments in parentheses.

Which of these is NOT true about Sass functions with parameters?

A They create CSS selectors

B They can return values

C They can take multiple parameters

D They help reuse code

Functions do not create selectors; they return values for use in styles.

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

Think about how you pass ingredients to a recipe and get a dish back.

Why are parameters useful in Sass functions? Give an example.

Imagine a calculator that can add any two numbers you give it.