Sass 可以简化此自定义SCSS网格吗？

我写了这个SCSS网格。还有一个js变量，用于设置每行的最大项数（min=4，max=8）。使用该变量，我向网格包装器添加一个类，并获得不同的CSS

正如您在中所看到的，它工作得很好，但感觉不必要地复杂。有没有更优雅的方式来编写这个SCS

.grid-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(100% + 20px);
  margin: 0 -10px;

  .grid-item,
  .grid-orphan {
    margin: 20px 10px 0;
    align-self: stretch;
    flex: 1;
    min-height: 1px;
    background-color: #0000CC;
    height: 50px;

  }

  .grid-orphan {
    height: 0;
    min-height: 0;
    margin: 0 10px;
  }

  /*

  EIGHT


  */
  &.eight {

    // eight
    @media screen and (min-width: 2201px) {
      .grid-item {
        min-width: calc(12.5% - 20px);
      }
    }

    // seven
    @media screen and (min-width: 2021px) and (max-width: 2200px) {
      .grid-item {
        min-width: calc((100% / 7) - 20px);

      }
    }

    // six
    @media screen and (min-width: 1827px) and (max-width: 2020px) {
      .grid-item {
        min-width: calc((100% / 6) - 20px);

      }
    }

    // five
    @media screen and (min-width: 1527px) and (max-width: 1826px) {
      .grid-item {
        min-width: calc(20% - 20px);
      }
    }

    // four
    @media screen and (min-width: 1277px) and (max-width: 1526px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }
    }

    // three
    @media screen and (min-width: 992px) and (max-width: 1276px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 991px) {
      justify-content: space-between;

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

  /*

  SEVEN


  */
  &.seven {

    // seven
    @media screen and (min-width: 2021px) {
      .grid-item {
        min-width: calc((100% / 7) - 20px);
      }
    }

    // six
    @media screen and (min-width: 1827px) and (max-width: 2020px) {
      .grid-item {
        min-width: calc((100% / 6) - 20px);
      }
    }

    // five
    @media screen and (min-width: 1527px) and (max-width: 1826px) {
      .grid-item {
        min-width: calc(20% - 20px);
      }
    }

    // four
    @media screen and (min-width: 1277px) and (max-width: 1526px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }
    }

    // three
    @media screen and (min-width: 992px) and (max-width: 1276px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 991px) {
      justify-content: space-between;

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

  /*

  SIX


  */
  &.six {

    // six
    @media screen and (min-width: 1827px) {
      .grid-item {
        min-width: calc((100% / 6) - 20px);
      }
    }

    // five
    @media screen and (min-width: 1527px) and (max-width: 1826px) {
      .grid-item {
        min-width: calc(20% - 20px);
      }
    }

    // four
    @media screen and (min-width: 1277px) and (max-width: 1526px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }
    }

    // three
    @media screen and (min-width: 992px) and (max-width: 1276px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 991px) {
      justify-content: space-between;

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

  /*

  FIVE


  */
  &.five {

    // five
    @media screen and (min-width: 1527px) {
      .grid-item {
        min-width: calc(20% - 20px);
      }
    }

    // four
    @media screen and (min-width: 1277px) and (max-width: 1526px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }
    }

    // three
    @media screen and (min-width: 992px) and (max-width: 1276px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 991px) {
      justify-content: space-between;

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

  /*

  FOUR


  */
  &.four {

    // four
    @media screen and (min-width: 1600px) {
      .grid-item {
        min-width: calc(25% - 20px);
      }

    }

    // three
    @media screen and (min-width: 1200px) and (max-width: 1599px) {
      .grid-item {
        min-width: calc((100% / 3) - 20px);
      }
    }

    // two
    @media screen and (min-width: 601px) and (max-width: 1199px) {
      justify-content: space-between;

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

  @media screen and (min-width: 0) and (max-width: 600px) {
    justify-content: center;
    width: 100%;
    margin: 0;

    .grid-item {
      min-width: 100%;
      margin: 20px 0 0;

      &:first-child {
        margin-top: 0;
      }
    }

    .grid-orphan {
      min-width: 100%;
      margin: 0;
    }
  }
}

---

你可以先给那些你不止一次吃过的东西做一些调味品来保持干燥

e、 g

变成：

@mixin two {
  @media screen and (min-width: 601px) and (max-width: 991px) {
    justify-content: space-between;

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

然后，在上面有第一个代码块的所有地方，只需添加：

@include two;

---

最好把你的魔法数字也分配给sass变量，这样读起来会更好。您可能会涉及到一些地图和循环，但它不应该真的需要它。

这里有一个直接的建议，可以使用它来解决布局问题

我对最小的屏幕做了一个自以为是的更改，这样在媒体查询中只使用

min width

就更容易了

如果不需要根据助手类设置不同的列，甚至可以删除所有媒体查询，并让8列的规则适用于所有情况

编辑：

下面是一个简化的（讽刺的是）尝试：

---

非常感谢。我可能会使用一些混音器，但媒体的最小/最大宽度可能会发生变化，因此我可能需要对其进行编码。我会使用sass变量来表示每行的最大计数，但客户机希望能够在一个位置更改它，而不必编译任何内容：（我明白了，今天我会有另一个想法。如果你认为这对其他人有帮助，请投赞成票。干杯！我最终将我的flex容器转换成了网格。这是一个相当庞大的网站，在几十个不同的页面上有几十个网格，有着不同的实现，所以我害怕重构它，但看到你的例子鼓励我去尝试，这很容易简单。唯一的改变是我为断点添加了一些mixin，并且我必须添加一个minmax，所以：

网格模板列：repeat（4，minmax（0，1fr））；

这听起来是个聪明的解决方案，很高兴我能帮上忙！

@include two;

.grid-wrap {
    display: grid;
    grid-gap: 20px;

    .grid-item,
    .grid-orphan {
        background-color: #0000cc;
        height: 50px;
    }

    // Breakpoints are initially the same in all columns variations
    @media screen and (min-width: 601px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (min-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (min-width: 1277px) {
        grid-template-columns: repeat(4, 1fr);
    }

    @media screen and (min-width: 1527px) {
        grid-template-columns: repeat(5, 1fr);
    }

    @media screen and (min-width: 1827px) {
        grid-template-columns: repeat(6, 1fr);
    }

    @media screen and (min-width: 2021px) {
        grid-template-columns: repeat(7, 1fr);
    }

    @media screen and (min-width: 2201px) {
        grid-template-columns: repeat(8, 1fr);
    }

    &.four {
        // Different breakpoint values in 4 column variations
        @media screen and (min-width: 601px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media screen and (min-width: 1200px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media screen and (min-width: 1600px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    &.five {
        // No overrides
    }

    &.six {
        // No overrides
    }

    &.seven {
        // No overrides
    }

    &.eight {
        // No overrides
    }
}