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.