(width: w, height: h) 在 Bootstrap scss _sizing 文件中迭代了什么？答案

【问题标题】：What does (width: w, height: h) iterate over in Bootstrap scss _sizing file?(width: w, height: h) 在 Bootstrap scss _sizing 文件中迭代了什么？
【发布时间】：2021-03-01 03:23:23
【问题描述】：

我正在尝试了解引导实用程序/_sizing.scss 文件，但我不了解那里的第一个 for 循环。宽度和高度值从何而来？

【问题讨论】：

字面意思是 w 和 h，导致 w-100、h-100、w-50、h-50 等...

标签： twitter-bootstrap bootstrap-4 sass

【解决方案1】：

在 bootstrap scss 文件夹中，您可以找到在 _variable.scss 文件中声明的 $sizes 值。

// 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。第二个 each 循环迭代来自 _variables.scss 文件的 $size 和 $length。

$size 值为 (25,50,75,100,auto)
$length 值为 (25%,50%,75%,100%,auto)

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

.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 -->

【讨论】：