有人可以解释 Bootstrap 的 `_root.scss` 吗？

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

根据 Bootstrap 介绍 [1]，我在 .html 中放置了以下内容：

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

在窥探我的资源时（使用 Chrome 开发工具），我发现了以下 .scss 文件 https://stackpath.bootstrapcdn.com/bootstrap/scss/_root.scss，其中包含以下代码我不太明白：

// 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)};
}

它生成以下 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;
}

我的理解：

  1. $表示一个scss变量。
  2. @each 是 scss 并在列表 [2]
    3. 上执行循环
  3. --表示一个css变量
  4. :root 等同于 html

不明白的地方：

  1. $colors、$theme-colors 和 $grid-breakpoints 在哪里定义？
  2. scss #{$color} 之类的有什么作用？
    • 例如在 --#{$color}: #{$value};

当您在 Chrome Dev Tools 中查看源映射时，您看到的是已编译 CSS、 而非 [=32] 的 SASS 源映射=] 整个 Bootstrap SASS 源代码和继承结构。

$colors、$theme-colors 和 $grid-breakpoints 在哪里定义的？

  • 它们是BootstrapSASS个变量

#{$color}之类的scss有什么作用？

  • 迭代给定的映射（即：$colors）并为编译后的CSS中的每个{color}生成CSS个根变量。 explained in the docs 这些 CSS 变量“提供对常用值的轻松访问，例如我们的主题颜色、断点等...”

要了解更多内容，您需要了解 SASS，以及如何从 the Bootstrap source files

编译 CSS

另见： and