Home/Learn/Sass

Sass Sass

Write maintainable CSS with variables, nesting, mixins, modules, maps, and compiled output.

Lessons

Sign in to save progress
1 Sass Tutorial 2 Sass HOME 3 Sass Introduction 4 What Is Sass 5 Sass vs Plain CSS 6 SCSS vs Indented Syntax 7 Installing Sass 8 Your First Sass File 9 Compiling with the Sass CLI 10 Watch Mode 11 Sass Variables & Nesting 12 Variable Data Types 13 Variable Scope 14 Default Values with !default 15 Nesting Selectors 16 The Parent Selector & 17 Nested Properties 18 Avoiding Over-Nesting 19 Nesting Media Queries 20 Sass Comments 21 Interpolation 22 Mixins, Functions & Includes 23 Mixin Basics 24 Mixin Arguments 25 Default & Keyword Arguments 26 Content Blocks with @content 27 Arbitrary Arguments 28 Custom Functions 29 Mixins vs Functions 30 Mixins vs @extend 31 Extending Selectors with @extend 32 Placeholder Selectors 33 Operators 34 Numbers & the math Module 35 Division with math.div 36 Units & Unit Math 37 Strings & the string Module 38 Color Functions 39 The color Module 40 Booleans & Logic 41 The null Value 42 Modules with @use and @forward 43 Importing with @use 44 Re-exporting with @forward 45 Why @import Is Deprecated 46 Configuring Modules 47 Built-in Modules 48 Module Namespaces 49 Partials 50 Maps, Lists & Loops 51 Lists 52 List Functions 53 Maps 54 Map Functions 55 The @each Loop 56 The @for Loop 57 The @while Loop 58 Conditionals with @if and @else 59 The if() Function 60 Generating Utility Classes 61 Generating Theme Variants 62 Control Flow Patterns 63 Sass At-Rules Overview 64 @error, @warn and @debug 65 The meta Module 66 Sass Architecture 67 The 7-1 Pattern 68 ITCSS with Sass 69 Design Tokens 70 Folder Structure 71 Naming Conventions 72 BEM with Sass Nesting 73 Building a Spacing Scale 74 Building a Type Scale 75 Responsive Breakpoint Mixins 76 Media Queries in Sass 77 Theming with Sass 78 Dark Mode with Sass 79 Compiling Sass & Source Maps 80 Source Maps 81 Output Styles 82 Minifying Compiled CSS 83 Autoprefixer & PostCSS 84 Sass with Vite 85 Sass with Webpack 86 Sass with npm Scripts 87 Customizing Bootstrap with Sass 88 Sass in React 89 Sass with CSS Custom Properties 90 Sass Performance 91 Sass Best Practices 92 Common Sass Mistakes 93 Migrating from node-sass to Dart Sass 94 Sass Cheatsheet 95 Sass Interview Questions 96 Sass Quiz 97 Sass Exercises 98 Sass Practice Problems 99 Sass Project Ideas 100 Sass Syllabus 101 Sass Study Plan 102 Sass Bootcamp

The @each Loop

Sass Lesson 55 of 102 ~1 min read

Overview

Iterate over lists and maps to generate rules.

The @each Loop is easiest to learn by reading the example, changing it, and observing the result.

Core Ideas

  • Understand what The @each Loop changes.
  • Run the example.
  • Change one value.
  • Explain the result.

Step by Step

  1. Read the The @each Loop example.
  2. Run it.
  3. Change it.
  4. Explain it.

Code Example

$colors: (
  primary: #4f46e5,
  success: #10b981,
  danger:  #ef4444,
);

@each $name, $value in $colors {
  .text-#{$name} { color: $value; }
  .bg-#{$name}   { background: $value; }
}

Checklist

  • Read the example and change one value.
  • Check the result in the browser.
  • Write down the rule you learned.

Common Mistakes

  • Skipping the example.
  • Changing many things at once.
  • Not checking the result.

Practice Challenge

Practice the The @each Loop example in a small scratch file, then explain what changed and why.

Mastery Check

  • You can explain The @each Loop.
  • You can change the example.
  • You can debug the result.
Create a free account to save which lessons you've finished. Save my progress
← Previous Next lesson →