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;   
        }           
    }

用SASS编码偏移网格列

1 个答案: