我正在尝试为以下代码（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
因此，有一种方法可以：
用简洁的方式实现我的Sass地图？
补充支持，如果项目中断到下一行以保证金
进行此过程的更好方法？如果是这样，请随意散布Sassmeister代码。
最佳答案
您的问题包含几个要点，因此我将按照可能会更好的顺序进行回答。
网格系统（或列系统，为了更好地避免与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，您的结果将变得更好。
关于css - Sass网格系统-实现装订线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51424830/