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

如您所见，我为排水沟贴了一张萨斯地图。我试图使这一过程尽可能简单。我不确定是否应该使用每个循环，map-get()函数或其他方法。我也想在左边有空白。我必须考虑到，如果它们的列太多，它们将下降到下一行。

因此，基本上，如果我将第一个元素的边距设置为0，并且我有4列可以容纳在容器中，则第5个向前的项目将下降到下一行。问题在于第5个项目的边距仍将存在。

这代表了我的意思：

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

有没有办法：

以简洁的方式实现我的无礼地图？
增加对项目是否中断至下一行保证金的支持
执行此过程的更好方法？如果是这样，请随意散布sassmeister代码。

Answer 1

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

网格系统（或列系统，通常是为了更好地避免名称与CSS Grid规范冲突）的通常目的是通过提供使元素能够使用由空格定义的一个或多个“列”的空间的功能来简化元素定位。网格。此定义意味着列不能换行，因此您的flex-wrap: wrap打破了列系统的整个概念。
您的列宽数学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来演示这个数学。
如果您希望网格变得更好-值得让专用库执行网格数学运算。尝试为此目的使用Susy 3，您的结果将会变得更好。

Sass网格系统-实现装订线

1 个答案: