如何在CSS中用Sass@for生成栅格系统-css教程-PHP中文网

直接用@for生成栅格类易出错，因初学者常误将$i当百分比值导致.col-1{width:1%}等无效规则；正确做法是用percentage($i / 12.0)避免整除得0，并确保从1开始循环、through而非to、断点外层@each内层@for。

如何在css中用sass@for生成栅格系统

为什么直接用 `@for` 生成栅格类容易出错

因为 CSS 类名和属性值需要同步生成，但初学者常把列数循环和 width 计算写反，比如用 $i 当百分比值，结果生成 .col-1 { width: 1% } 这种无效类。Sass 的 @for 是整数循环，必须手动换算比例，且要避开除零、小数精度、响应式断点叠加等隐性坑。

`@for` 里怎么算出正确的 `width`

假设 12 列栅格，每列应占 100% / 12 * $i，但需保留小数位避免四舍五入偏差。Sass 提供 percentage() 和 round()，但更稳妥的是用浮点运算后截断两位小数：

@for $i from 1 through 12 {
  .col-#{$i} {
    width: #{percentage($i / 12)};
  }
}

用 $i / 12 而非 100% / 12 * $i，避免单位混用报错
#{percentage(...)} 比 #{... * 100}% 更安全，自动处理小数和单位
若需兼容老版本 Sass（#{round($i / 12 * 10000) / 100}% 手动保留两位小数

如何避免生成冗余类或覆盖已有样式

常见问题是把 .col-1 到 .col-12 全部输出，但实际项目中可能只用到部分列数，或已有 .col-6 被其他模块定义过。建议加命名空间和条件开关：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

$grid-columns: 12 !default;
$enable-grid-classes: true !default;
<p>@if $enable-grid-classes {
@for $i from 1 through $grid-columns {
.g-col-#{$i} {
flex: 0 0 #{percentage($i / $grid-columns)};
max-width: #{percentage($i / $grid-columns)};
}
}
}</p>

前缀用 g-col- 而非 col-，降低冲突概率
同时设置 flex 和 max-width，适配 Flexbox 布局场景
用 !default 允许外部覆盖变量，方便主题切换

响应式栅格要不要在同一个 `@for` 里处理

不要。把不同断点的循环塞进一个 @for 会极大增加嵌套复杂度，也难以调试。正确做法是拆成独立循环，用 @each 驱动断点配置：

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px
);
<p>@each $name, $value in $breakpoints {
@media (min-width: #{$value}) {
@for $i from 1 through 12 {
.g-col-#{$name}-#{$i} {
flex: 0 0 #{percentage($i / 12)};
}
}
}
}</p>