Sass Grid System - 实现排水沟

Question

我正在尝试为以下代码实现排水沟(https://www.sassmeister.com/gist/eca78ee1435202c7e7dcaecc57c75bd5)：

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.6.2)
// ----

//Variable Declarations
$__grid--columns:12;
$__grid--breakpoints: (
    'xxxsmall': 375px,
    'xxsmall':  480px,
    'xsmall':   667px,
    'small':    768px,
    'medium':   960px,
    'large':    1024px,
    'xlarge':   1200px,
    'xxlarge':  1400px,
    'xxxlarge': 1600px,
);
$__grid--gutters: (
    'small':    30px,
    'medium':   30px,
    'large':    30px
);
$__grid--cell-containers: (
    'small':    1200px,
    'medium':   1400px,
    'large':    1600px,
    'full':     100%
);    

//Mixins for Grid
// @mixin createGutters() {
//   .element {
//     @if map-has-key($__grid--gutters, '') {
//       content: 'Key Found';
//     } @else {
//       content: 'Key Not Found';
//     }
//   }
// }
@mixin createCells() {
  @each $key, $value in $__grid--breakpoints {
    @media screen and (min-width:$value){
      @for $i from 1 through $__grid--columns {
        &.#{$key}-#{$i}{
          @if map-has-key($__grid--gutters, $key) {
            margin-left:map-get($__grid--gutters, $key);
          }
          width:((100% / $__grid--columns) * $i);
        }
      }  
    }
  }
}

//Spit out the cells
.row {
  display:flex;
  flex-wrap:wrap;
}
.cell {
  // @include createGutters;
  @include createCells;
}

//Styles not needed for grid
// * {
//   box-sizing:border-box;
// }
// .color {
//   padding:10px;
//   background-color:salmon;
// }

如您所见，我有一张排水沟的 sass 地图。我试图让这个尽可能简单。我不确定我是否应该使用 each 循环，或者 map-get() 函数，或者其他的东西。我也想在左边有边距。我必须考虑，如果它们的列太多，它们将掉到下一行。

所以基本上如果我将第一个元素的边距设置为 0，并且我有 4 列可以放入容器中，那么从第 5 个开始的项目将下降到下一行。问题是第 5 个项目的边距仍然存在。

这是我的意思的表示：

item---item---item---item
---item---item---item---item
---item---item---item---item

那么有没有办法：

1. 以简洁的方式实现我的 sass 映射？
2. 添加支持如果项目中断到下一行以获取边距
3. 执行此过程的更好方法？如果是这样，请随时 fork sassmeister 代码。

Answer 1

您的问题包含几个要点，因此我将尝试按照您认为会更好的顺序回答它们。

1. 网格系统（或列系统，为了更好地命名它以避免名称与 CSS 网格规范冲突）的通常目的是通过提供元素占用由定义的一个或多个“列”空间的能力来简化元素定位网格。这个定义意味着列不能换行，所以你的flex-wrap: wrap 打破了列系统的整个想法。
2. 您的列宽数学width:((100% / $__grid--columns) * $i); 不包括网格不仅包含列，还包含列之间的排水沟这一事实。通常排水沟仅在在列之间可用，因此对于 12 列网格，您需要有 11 个已定义大小的排水沟。这意味着您的网格列宽的实际数学应该使用calc() 表达式，它的实际数学将如下所示：width: calc(#{100% / $__grid--columns * $i} - #{$gutter-size / $__grid--columns * ($__grid--columns - $i)}); 其中$gutter-size 是当前装订线大小。我准备了一个 CodePen example 来演示这个数学。
3. 如果您希望您的网格更好 - 让网格数学由专用库执行是值得的。尝试为此目的使用Susy 3，您的结果会变得更好。