Can someone explain Bootstrap's `_root.scss`?

Question

Per Bootstrap intro [1], I placed the following in my .html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

While snooping around my sources (using Chrome Dev Tools) I found the following .scss file https://stackpath.bootstrapcdn.com/bootstrap/scss/_root.scss with the following code which I don't fully understand:

// Do not forget to update getting-started/theming.md!
:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}

It generates the following css:

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

What I understand:

1. $ indicates a scss variable.
2. @each is scss and performs a loop over lists [2]
3. -- indicates a css variable
4. :root is equivalent to html

What I don't understand:

1. Where are $colors, $theme-colors, and $grid-breakpoints defined?
2. What does the scss #{$color} and the like do?
   • e.g. in --#{$color}: #{$value};

Answer 1

When you look at the source maps in Chrome Dev Tools, you're seeing SASS source maps of the compiled CSS, not the entire Bootstrap SASS source and inheritance structure.

Where are $colors, $theme-colors, and $grid-breakpoints defined?

• They are Bootstrap SASS variables

What does the scss #{$color} and the like do?

• Iterate the given map (ie: $colors) and generate CSS root variables for each {color} in the compiled CSS. As explained in the docs these are CSS variables that "provide easy access to commonly used values like our theme colors, breakpoints, etc..."

To understand more than this you'd want to learn about SASS, and how the CSS is compiled from the Bootstrap source files

Also see: CSS use color from another class? and Is it possible to set custom breakpoints in Bootstrap 4 just by editing the CSS files?