Twitter bootstrap （宽度：w，高度：h）在引导scss大小文件中迭代什么？

我试图理解bootstrap utilities/_sizing.scss文件，但我不理解其中的第一个for循环。宽度和高度值来自何处？

在引导scss文件夹中，您可以找到在_variable.scss文件中声明的$size值

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  ),
  $sizes
);

下面是循环说明：

@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
  }
}

在第一个示例中，每个宽度和高度是$prop，w和h是$abbrev。 第二个循环迭代来自_variables.scss文件的$size和$length

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge(
  (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
  ),
  $sizes
);

$size值为（25,50,75100，自动）
$length值为（25%、50%、75%、100%，自动）

结果是它生成了宽度和高度的所有类的组合，其大小和长度如下所示：

.w-100{ //where w is the $abbrev and 100 is the $size
    width:100%; //where width is the $prop and 100% is the $length
}

然后，如您所知，您可以将这些类应用于html，如下所示：

<div class="w-100"></div> <!-- A 100% width div -->

---

字面上是

w

和

h

，导致w-100、h-100、w-50、h-50等。。。