sass:list module - Mini Project: Build & Apply

Using the sass:list Module to Manage Colors

📖 Scenario: You are creating a simple color palette for a website. You want to store a list of colors and then pick only the first few colors to use in your design.

🎯 Goal: Build a Sass stylesheet that uses the sass:list module to create a list of colors, set a limit for how many colors to use, extract those colors using the list module, and then apply them as background colors to CSS classes.

📋 What You'll Learn

Create a Sass list variable named $colors with exactly these colors: #ff0000, #00ff00, #0000ff, #ffff00, #00ffff

Create a variable named $max-colors and set it to 3

Use the list.slice() function from the sass:list module to create a new list named $selected-colors that contains only the first $max-colors colors from $colors

Write CSS rules that create classes .color-1, .color-2, and .color-3 with background colors from $selected-colors using a @for loop

💡 Why This Matters

🌍 Real World

Managing color palettes in Sass helps keep website styles consistent and easy to update.

💼 Career

Front-end developers often use Sass list functions to handle design tokens like colors efficiently.

1

Create the initial color list

Create a Sass list variable called $colors with these exact colors in this order: #ff0000, #00ff00, #0000ff, #ffff00, #00ffff

SASS

# Create the $colors list with 5 colors
# Your code here

Hint

Use parentheses to create a list in Sass. Separate colors with commas.

2

Set the maximum number of colors to use

Create a variable called $max-colors and set it to the number 3

SASS

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #00ffff);

# Create $max-colors variable and set it to 3
# Your code here

Hint

Just assign the number 3 to the variable $max-colors.

3

Extract the first colors using sass:list slice

Use the list.slice() function from the sass:list module to create a new list variable called $selected-colors that contains the first $max-colors colors from $colors

SASS

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #00ffff);

$max-colors: 3;

# Create $selected-colors using list.slice() to get first $max-colors colors
# Your code here

Hint

Remember to add @use "sass:list"; at the top to access the list module functions.

4

Create CSS classes with background colors from the selected list

Write a @for loop from 1 through $max-colors that creates CSS classes named .color-1, .color-2, and .color-3. Each class should have a background-color set to the corresponding color from $selected-colors using list.nth()

SASS

@use "sass:list";

$colors: (#ff0000, #00ff00, #0000ff, #ffff00, #00ffff);

$max-colors: 3;

$selected-colors: list.slice($colors, 1, $max-colors);

// Use a @for loop to create .color-1, .color-2, .color-3 classes
// Each with background-color from $selected-colors
# Your code here

Hint

Use @for $i from 1 through $max-colors and inside the loop create the classes with .color-#{$i}. Use list.nth() to get the color.

Practice

1.

What is the main purpose of the sass:list module in Sass?

easy

A. To provide functions for managing lists like adding or removing items

B. To create color palettes automatically

C. To handle font styles and sizes

D. To compile Sass files into CSS

Solution

1. Step 1: Understand the sass:list module role

   The sass:list module offers functions to work with lists, such as adding, removing, or finding items.

2. Step 2: Compare options with module purpose

   Options A, B, and D describe unrelated tasks like colors, fonts, or compilation, which are not the sass:list module's job.

3. Final Answer:

   To provide functions for managing lists like adding or removing items -> Option A

4. Quick Check:

   sass:list = list management [OK]

Hint: sass:list is all about list operations, not colors or fonts [OK]

Common Mistakes:

• Confusing sass:list with color or font modules
• Thinking sass:list compiles Sass files
• Assuming sass:list handles CSS properties directly

2.

Which of the following is the correct way to import the sass:list module in your Sass file?

easy

A. @forward "sass:list";

B. @import "sass:list";

C. @include "sass:list";

D. @use "sass:list";

Solution

1. Step 1: Recall Sass module import syntax

   Modern Sass uses @use to import modules, not @import which is deprecated.

2. Step 2: Match options with correct syntax

   @use "sass:list"; uses @use "sass:list"; which is the correct way to import the list module.

3. Final Answer:

   @use "sass:list"; -> Option D

4. Quick Check:

   Use @use for modules [OK]

Hint: Always use @use for Sass modules, not @import [OK]

Common Mistakes:

• Using @import instead of @use
• Confusing @include with module import
• Using @forward incorrectly for importing

3.

Given the Sass code below, what will be the output of list.length($colors)?

@use "sass:list";
$colors: red, green, blue;

.result {
  length: list.length($colors);
}

medium

A. length: 1;

B. length: 0;

C. length: 3;

D. length: 4;

Solution

1. Step 1: Understand the list variable

   The variable $colors contains three items: red, green, and blue.

2. Step 2: Apply list.length function

   The list.length() function returns the number of items in the list, which is 3 here.

3. Final Answer:

   length: 3; -> Option C

4. Quick Check:

   3 items in list = 3 [OK]

Hint: Count items separated by commas for list length [OK]

Common Mistakes:

• Counting commas instead of items
• Confusing list length with string length
• Forgetting to import sass:list module

4.

Identify the error in the following Sass code using sass:list module:

@use "sass:list";
$items: 1 2 3;
$new-items: list.push($items, 4);

.result {
  content: $new-items;
}

medium

A. Using list.push instead of list.append

B. Missing commas between list items in $items

C. Incorrect module import syntax

D. Cannot append numbers to lists

Solution

1. Step 1: Check list syntax in $items

   The list $items is written as 1 2 3 without commas, which is valid space-separated list.

2. Step 2: Understand list.append behavior

   The sass:list module has list.append() to add items, but no list.push().

3. Step 3: Identify the error

   The code uses non-existent list.push(), causing a compilation error. Change to list.append().

4. Final Answer:

   Using list.push instead of list.append -> Option A

5. Quick Check:

   sass:list.append exists, list.push does not [OK]

Hint: sass:list uses list.append, not list.push [OK]

Common Mistakes:

• Confusing list.append with list.push (no list.push in sass:list)
• Assuming space-separated lists are always safe
• Ignoring module import correctness

5.

You want to combine two lists $list1: 1, 2, 3; and $list2: 4, 5; into one list using sass:list functions. Which code snippet correctly joins these lists?

@use "sass:list";

// Options:
// A
$combined: list.length($list1) + list.length($list2);

// B
$combined: list.append($list1, $list2);

// C
$combined: list.insert($list1, $list2, 1);

// D
$combined: list.join($list1, $list2, comma);

hard

A. $combined: list.length($list1) + list.length($list2);

B. $combined: list.join($list1, $list2, comma);

C. $combined: list.insert($list1, $list2, 1);

D. $combined: list.append($list1, $list2);

Solution

1. Step 1: Understand list.join function

   The list.join() function combines two lists into one, with a separator (comma or space).

2. Step 2: Analyze each option

   $combined: list.join($list1, $list2, comma); correctly uses list.join($list1, $list2, comma) to join lists with commas.
   $combined: list.append($list1, $list2); appends the entire second list as one item, not merging.
   $combined: list.insert($list1, $list2, 1); inserts the whole second list at position 1, nesting it.
   $combined: list.length($list1) + list.length($list2); adds lengths, not lists.

3. Final Answer:

   $combined: list.join($list1, $list2, comma); -> Option B

4. Quick Check:

   Use list.join to merge lists [OK]

Hint: Use list.join to merge two lists cleanly [OK]

Common Mistakes:

• Using list.append to merge lists (adds as one item)
• Using list.insert to add whole list inside another
• Adding lengths instead of joining lists