Functions vs mixins comparison in SASS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Difference in output between a function and a mixin

Consider the following Sass code snippets. What will be the output CSS of the function and the mixin respectively?

SASS

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

@mixin double-mixin($n) {
  width: $n * 2 + px;
}

.box1 {
  width: double(10) + px;
}

.box2 {
  @include double-mixin(10);
}

A

.box1 { width: 10px; }
.box2 { width: 20px; }

B

.box1 { width: 20px; }
.box2 { width: 20px; }

C

.box1 { width: 20; }
.box2 { width: 20px; }

D

.box1 { width: 20px; }
.box2 { width: 10px; }

💡 Hint

Remember that functions return values and mixins output CSS rules directly.

The function double returns a number which is then concatenated with px in the property. The mixin directly outputs the property with the calculated value. Both produce width: 20px;.

📝 Syntax

intermediate

Correct usage of a mixin with parameters

Which option correctly defines and uses a mixin that sets background color and padding?

A

@mixin style($color, $pad) {
  background-color: $color;
  padding: $pad;
}

.box {
  @include style(red, 10px);
}

B

@mixin style($color, $pad) {
  background-color: $color;
  padding: $pad;
}

.box {
  include style(red, 10px);
}

C

@mixin style($color, $pad) {
  background-color: $color;
  padding: $pad;
}

.box {
  @style style(red, 10px);
}

D

@mixin style($color, $pad) {
  background-color: $color;
  padding: $pad;
}

.box {
  style(red, 10px);
}

💡 Hint

Mixins are included with @include keyword.

Mixins must be included using @include. Options A, B, and C use incorrect syntax for including mixins.

❓ rendering

advanced

Output CSS from a function returning a color

What is the rendered CSS output of the following Sass code?

SASS

@function theme-color() {
  @return #3498db;
}

.button {
  background-color: theme-color();
  color: white;
}

A

.button {
  background-color: #000000;
  color: white;
}

B

.button {
  background-color: theme-color();
  color: white;
}

C

.button {
  background-color: #3498db;
  color: white;
}

D

.button {
  background-color: #3498db;
}

💡 Hint

Functions return values that are inserted into CSS properties.

The function theme-color() returns the hex color #3498db. This value is used in the background-color property in the output CSS.

❓ selector

advanced

Which Sass code produces this CSS output?

Given this CSS output, which Sass code using mixins and functions produces it? .button { font-size: 1.5rem; margin: 1rem; color: #e74c3c; }

A

@function main-color() {
  @return #e74c3c;
}

@mixin spacing($size) {
  margin: $size;
}

.button {
  font-size: 1.5rem;
  @include spacing(1rem);
  color: #e74c3c;
}

B

@function main-color() {
  @return #e74c3c;
}

@mixin spacing($size) {
  margin: $size;
}

.button {
  font-size: 1.5rem;
  margin: 1rem;
  color: main-color();
}

C

@function main-color() {
  @return #e74c3c;
}

@mixin spacing($size) {
  padding: $size;
}

.button {
  font-size: 1.5rem;
  @include spacing(1rem);
  color: main-color();
}

D

@function main-color() {
  @return #e74c3c;
}

@mixin spacing($size) {
  margin: $size;
}

.button {
  font-size: 1.5rem;
  @include spacing(1rem);
  color: main-color();
}

💡 Hint

Functions return values; mixins output CSS rules. The color uses the function, margin uses the mixin.

Option D correctly uses the function main-color() to set color and the mixin spacing to set margin. Other options either misuse the mixin or hardcode values.

❓ accessibility

expert

Using mixins and functions to improve accessible color contrast

You want to create a Sass function that returns a text color (black or white) based on background color brightness for accessibility. Which option correctly implements this function and uses it in a mixin to style a button's background and text color?

A

@function accessible-text-color($bg) {
  $brightness: lightness($bg);
  @return if($brightness > 50%, black, white);
}

@mixin button-style($bg) {
  background-color: $bg;
  color: accessible-text-color($bg);
}

.button {
  @include button-style(#3498db);
}

B

@function accessible-text-color($bg) {
  $r: red($bg);
  $g: green($bg);
  $b: blue($bg);
  $brightness: ($r * 0.299) + ($g * 0.587) + ($b * 0.114);
  @return if($brightness > 186, black, white);
}

@mixin button-style($bg) {
  background-color: $bg;
  color: accessible-text-color($bg);
}

.button {
  @include button-style(#3498db);
}

C

@function accessible-text-color($bg) {
  $brightness: ($bg * 0.299) + ($bg * 0.587) + ($bg * 0.114);
  @return if($brightness > 186, black, white);
}

@mixin button-style($bg) {
  background-color: $bg;
  color: accessible-text-color($bg);
}

.button {
  @include button-style(#3498db);
}

D

@function accessible-text-color($bg) {
  $brightness: ($r + $g + $b) / 3;
  @return if($brightness > 186, black, white);
}

@mixin button-style($bg) {
  background-color: $bg;
  color: accessible-text-color($bg);
}

.button {
  @include button-style(#3498db);
}

💡 Hint

Use Sass's built-in lightness() function to get brightness from a color.

Option A correctly uses the lightness() function to get brightness and returns black or white accordingly. Option A tries to manually calculate brightness but uses incorrect logic for Sass functions. Options C and D use invalid operations on colors.

Practice

1. What is the main difference between a function and a mixin in Sass?

easy

A. Functions output CSS rules, while mixins return values.

B. Functions return values, while mixins output CSS rules.

C. Functions and mixins both return values but in different formats.

D. Functions and mixins both output CSS rules but with different syntax.

Solution

1. Step 1: Understand what functions do in Sass

   Functions calculate and return values like colors, numbers, or strings.

2. Step 2: Understand what mixins do in Sass

   Mixins insert blocks of CSS rules where they are included.

3. Final Answer:

   Functions return values, while mixins output CSS rules. -> Option B

4. Quick Check:

   Functions = return values, Mixins = CSS rules [OK]

Hint: Functions return values; mixins add CSS blocks [OK]

Common Mistakes:

• Thinking mixins return values like functions
• Confusing output of CSS rules with returned values
• Assuming both do the same thing

2. Which of the following is the correct syntax to define a Sass function named double that returns twice the input number?

easy

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

B. @mixin double($n) { @return $n * 2; }

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

D. @mixin double($n) { @content; }

Solution

1. Step 1: Identify function syntax in Sass

   Functions use @function keyword and must include a @return statement.

2. Step 2: Check each option

   @function double($n) { @return $n * 2; } correctly defines a function with @return $n * 2;. Choices using @mixin are incorrect for functions. @function double($n) { $n * 2; } lacks @return.

3. Final Answer:

   @function double($n) { @return $n * 2; } -> Option A

4. Quick Check:

   Functions need @return [OK]

Hint: Functions use @function and must return a value [OK]

Common Mistakes:

• Using @mixin instead of @function for functions
• Forgetting the @return statement
• Confusing mixin syntax with function syntax

3. Given the Sass code below, what CSS will be generated?

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(10px);
}

medium

A. .button {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

B. .button {
border-radius: 10px;
}

C. Error: mixin border-radius not found

D. .button {
@include border-radius(10px);
}

Solution

1. Step 1: Understand what the mixin does

   The mixin adds three CSS properties for border-radius with vendor prefixes.

2. Step 2: Check how the mixin is included

   The mixin is included inside the .button selector with argument 10px, so all three properties will appear with that value.

3. Final Answer:

   .button { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } -> Option A

4. Quick Check:

   Mixins output CSS rules where included [OK]

Hint: Mixins insert CSS blocks with given arguments [OK]

Common Mistakes:

• Expecting only the last property without prefixes
• Thinking mixins return values instead of CSS
• Confusing @include with outputting @include literally

4. What is wrong with this Sass code?

@function add($a, $b) {
  $sum: $a + $b;
}

.result {
  width: add(10px, 5px);
}

medium

A. Mixins cannot be called inside property values.

B. The function uses invalid variable names.

C. The function should use @mixin instead of @function.

D. The function does not have a @return statement.

Solution

1. Step 1: Check function definition

   The function calculates $sum but does not return it with @return.

2. Step 2: Understand function usage

   Functions must return a value to be used inside property values like width. Without @return, it returns nothing.

3. Final Answer:

   The function does not have a @return statement. -> Option D

4. Quick Check:

   Functions must return values to be used [OK]

Hint: Functions need @return to output values [OK]

Common Mistakes:

• Forgetting @return in functions
• Confusing mixins with functions
• Using mixins inside property values

5. You want to create a reusable Sass code that sets a color with 50% opacity. Which approach is best and why?

hard

A. Use a mixin that returns a value (mixins don't return values).

B. Use a mixin to output CSS rules setting color with 50% opacity.

C. Use a function to return the color with 50% opacity for flexible use.

D. Use a function that outputs CSS rules (invalid syntax).

Solution

1. Step 1: Understand the goal

   You want a reusable way to get a color with 50% opacity that can be used anywhere, like in variables or properties.

2. Step 2: Choose between function and mixin

   Functions return values, so they can be used inside any property or variable. Mixins output CSS rules directly and cannot return values.

3. Step 3: Evaluate choices

   The choice suggesting a mixin that returns a value is incorrect because mixins do not return values. The choice using a mixin to output CSS rules for the color property is less flexible. The choice using a function to output CSS rules has invalid syntax. The choice using a function to return the color value with opacity is best for flexibility.

4. Final Answer:

   Use a function to return the color with 50% opacity for flexible use. -> Option C

5. Quick Check:

   Functions return values for reuse; mixins output CSS [OK]

Hint: Use functions to return values; mixins to add CSS rules [OK]

Common Mistakes:

• Using mixins when a value return is needed
• Expecting mixins to return values
• Trying to output CSS from functions