SASS 响应式网格混合

【问题标题】：SASS responsive grid mixinSASS 响应式网格混合
【发布时间】：2016-12-15 19:02:41
【问题描述】：

我有一个用于在 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 到 768px）。当 second 媒体查询触发时，之前的网格元素不会覆盖 'margin-right: 0'。

见DEMO

有什么办法解决这个问题吗？

【问题讨论】：

你想要什么？

标签： css sass media-queries

【解决方案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%); }
}

我们只需要在媒体查询中同时写入 min-width 和 max-width 即可。

@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

【讨论】：