使用 SASS 编码偏移网格列

Question

我正在尝试使用 SASS 编写我自己的响应式网格系统。使用这个简单的Tutorial 我能够制作一个简单的网格。

目前，我正在使用以下代码根据媒体查询计算所有列的宽度：

@media #{$breakpoint-medium} {
    .wrapper {      
        width: 95%;
        max-width: $grid-max-width;     
        }
    @for $i from 1 through $grid-columns {      
        .col-#{$i} {         
            width: 100% / $grid-columns * $i;   
            }           
        }   
    }

其中 $grid-columns = 12

这很好用，但是，我想将一个我指定为 8 列宽的文本块居中，所以我需要将此列推送或偏移 2 列。

我是 SASS 的新手，所以我仍然对在我的 CSS 等中使用数学有所了解，但是我如何调整这段代码以便我可以创建一个类似的类，“push-#”，它会自动知道正确推送内容吗？

提前非常感谢！

Answer 1

本质上是相同的数学运算，您只是应用边距而不是宽度。

@for $i from 1 through $grid-columns {      
    .push-#{$i} {         
        margin-left: 100% / $grid-columns * $i;   
        }           
    }