css - SASS 响应式网格混合

Question

我有一个用于在 SCSS 中构建响应式网格系统的 mixin:

@mixin grid($cols, $marg) {
    margin: 0 $marg $marg 0;
    width: ( (100% - (($cols - 1) * $marg )) / $cols );

    &:nth-child(#{$cols}n){
        margin-right: 0;
    }
}
// $cols - number of columns
// $marg - gutter

我从 there 拿来的.

但它仅适用于 first 媒体查询(在我的情况下屏幕宽度为 480 到 768 像素)。当 second 媒体查询触发时，之前的网格元素不会覆盖“margin-right: 0”。

参见 DEMO

有什么解决办法吗？

Answer 1

我知道了。而不是只使用最小宽度:

@media screen and(min-width: 480px){
  li{ @include grid(2, 2%); }
}
@media screen and(min-width: 768px){
  li{ @include grid(3, 2%); }
}
@media screen and(min-width: 920px){
  li{ @include grid(4, 2%); }
}

我们只需要在媒体查询中写入最小宽度和最大宽度。

@media screen and (min-width: 480px) and (max-width: 767px) {
  li{ @include grid(2, 2%); }
}
@media screen and (min-width: 768px) and (max-width: 919px){
  li{ @include grid(3, 2%); }
}
@media screen and (min-width: 920px){
  li{ @include grid(4, 2%); }
}

参见 DEMO