什么(宽度: w，高度: h)在引导scss _sizing文件中迭代？

Question

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

​

Answer 1

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

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

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

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