Sass CSS dynamic＆amp;使用mixin＆amp; amp;响应列布局变量

Question

为了使CSS更加紧凑，动态和可维护使用Sass，我偶然发现了以下内容：我有一个带有 n - 列布局的网页。每个项目都有一些余量，但每个 n + 1 项目应该有0个边距，因为它是新行的第一项，应该完全对齐。

示例：桌面具有4列布局，因此每5-9-13项应具有0个边距。平板电脑有3列布局，所以每4-7-10项应该有0个边距等等..

这就是我所拥有的

@mixin rowmargin($rows) {
    &:nth-child(#{$rows}n + 1){
         margin-left: 0px;
    }
}
div.col.list{
    overflow: hidden;
    position: relative;
    @include rowmargin(4);
    @media only screen and (max-width: 960px){@include rowmargin(3);}
    @media only screen and (max-width: 640px){@include rowmargin(2);}
}

这样看起来有4列（好） 这有3列（坏）

正如您所看到的，第二行的第二项有0个边距，但只有第一个项目应该有0个边距。

Ps：不介意这些成分，它们在平板电脑和移动设备上不会崩溃（对此有何说法？）。