使用 SCSS 循环语句生成宽度和高度样式

这段代码使用了 SCSS 的 each 循环语句，分别遍历了 $widths 和 $heights 数组中的元素，生成了一组类名对应的 CSS 样式规则。其中，#{$w} 和 #{$h} 表示占位符，用来插入循环变量的值。最终生成的 CSS 类名为 .w-1 到 .w-100 和 .h-1 到 .h-100，它们分别对应宽度和高度从 1px 到 100px 的样式规则。这种方式可以大量减少手动编写 CSS 的工作量，并且方便维护和修改。

$widths: 1 to 100;
$heights: 1 to 100;

@each $w in $widths {
    .w-#{$w} {
        width: #{$w}px;
    }
}

@each $h in $heights {
    .h-#{$h} {
        height: #{$h}px;
    }
}

例如，可以使用 .w-50 类名来设置元素宽度为 50px，使用 .h-25 类名来设置元素高度为 25px。

这种方法可以有效地提高 CSS 代码的复用性和可维护性，特别是在需要大量重复的宽度和高度样式的情况下。