我可以用 sass 简化这个 css 吗？

Question

我只能回答我自己的问题： trying to replicate the layout "fit as needed" or "Ram" for IE 11 but items are being stretched when they should not

body {
  margin: 0;
  height: 100vh;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  /* border: 4px solid blue; */
  box-sizing: border-box;
  height: 100%;
}

.item {
  background: darksalmon;
  margin: 0 20px 20px 0;
  /* 100% / [# of columns] - ([gap]*([# of columns]-1)/[# of columns]) */
  width: calc(99.9999% / 4 - ((20px * 3) / 4));
  /* border: 1px solid black; */
  max-width: 1fr;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item:nth-child(4n) {
  background: burlywood;
  margin-right: 0;
}

.item:nth-last-child(-n + 4) {
  background: purple;
  margin-bottom: 0;
}

@media (max-width: 859px) {
  .item:nth-child(1) {
    background: red;
  }
  .item {
    /* 100% / [# of columns] - ([gap]*([# of columns]-1)/[# of columns]) */
    width: calc(99.9999% / 3 - ((20px * 2) / 3));
    /* border: 1px solid black; */
  }
  .item:nth-child(4n) {
    margin-right: 20px;
  }
  .item:nth-last-child(-n + 4) {
    margin-bottom: 20px;
  }
  .item:nth-child(3n) {
    background: burlywood;
    margin-right: 0;
  }
  .item:nth-last-child(-n + 1) {
    background: pink;
    margin-bottom: 0;
  }
}

@media (max-width: 639px) {
  .item:nth-child(1) {
    background: red;
  }
  .item {
    /* 100% / [# of columns] - ([gap]*([# of columns]-1)/[# of columns]) */
    width: calc(99.9999% / 2 - ((20px * 1) / 2));
    /* border: 1px solid black; */
  }
  .item:nth-child(4n) {
    margin-right: 20px;
  }
  .item:nth-last-child(-n + 4) {
    margin-bottom: 20px;
  }
  .item:nth-child(3n) {
    margin-right: 20px;
  }
  .item:nth-last-child(-n + 3) {
    margin-bottom: 20px;
  }
  .item:nth-child(2n) {
    background: lightskyblue;
    margin-right: 0;
  }
  .item:nth-last-child(-n + 2) {
    background: midnightblue;
    margin-bottom: 0;
  }
}

@media (max-width: 419px) {
  .item:nth-child(1) {
    background: red;
  }
  .item {
    /* 100% / [# of columns] - ([gap]*([# of columns]-1)/[# of columns]) */
    width: calc(99.9999%);
    /* border: 1px solid black; */
  }
  .item:nth-child(4n) {
    margin-right: 20px;
  }
  .item:nth-last-child(-n + 4) {
    margin-bottom: 20px;
  }
  .item:nth-child(3n) {
    margin-right: 20px;
  }
  .item:nth-last-child(-n + 3) {
    margin-bottom: 20px;
  }
  .item:nth-child(2n) {
    margin-right: 20px;
  }
  .item:nth-last-child(-n + 2) {
    margin-bottom: 20px;
  }
  .item:nth-child(n) {
    margin-right: 0;
  }
  .item:nth-last-child(-n + 1) {
    margin-bottom: 0;
  }
}

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

我想知道是否可以使用 sass 简化重新划分列并设置边距以伪造间隙的 css 部分。我几乎没有经验。因此，我们将不胜感激。

请注意，随着列数的减少，我必须覆盖先前的宽度和第 n 个子边距，并添加新规则，如您所见，4n,3n...-n + 4,-n + 3。 .. .那里，你看到了模式，这就是我想要简化的。

PS：忽略添加更多项目会破坏这一点的事实。这不是那么重要。但如果你知道更简单的方法，我也很乐意知道。

PS2：我尝试使用 gutter grid mixin 作为间隙。

http://gutter-grid.net/

但这似乎太令人费解了。

PS3：与 css 技巧 tut 的情况相同，也适用于间隙。

https://css-tricks.com/css-grid-in-ie-faking-an-auto-placement-grid-with-gaps/

我需要用一个 div 加上带边距的混合填充来包装每个项目。

Answer 1

你可以这样做，这里的“技巧”是在网格上使用负边距，这样你就可以将你的 css 减少到这个。

这是 IE 教授。如果你喜欢使用 SCSS，你可以添加一个变量 $gap: 20px; 并在你有 20px 的地方使用它，记住在计算中你必须像这样使用它 calc(50% - #{$gap})

只是为了评论你以前的 css。在 IE 中，calc 不支持多重计算，所以这不起作用：calc((100%/2) + 10px)

body {
  margin: 0;
  height: 100vh;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  height: 100%;
  margin-top: -20px;
  margin-left: -20px;
  background-color: deepskyblue;
}

.item {
  background: deeppink;
  margin-top: 20px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 420px) {
  .item {
    width: calc(50% - 20px);
  }
}

@media (min-width: 640px) {
  .item {
    width: calc(33.33% - 20px);
  }
}

@media (min-width: 860px) {
  .item {
    width: calc(25% - 20px);
  }
}

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>