Миксины для разработки

mixins.scss

// Миксин реализует грид систему внутри flex-контейнера
// $cols - количество блоков в одном ряду
// $margin - отступ между блоками в %
@mixin grid-element($cols, $margin) {
  margin-bottom: $margin;

  // Если больше 5 блоков в ряду, то растягивать на всю ширину
  @if($cols >= 5) {
    width: 100%;
    margin-right: 0;
  }
  
  @else {
    width: ((100% - (($cols - 1) * $margin)) / $cols);
    margin-right: $margin;
  }
  
  &:nth-hild(#{$cols}n) {
    margin-right: 0;
  }
}

// Пример:
.grid {
  display: flex;
  flex-wrap: wrap;

  &__element {
    @include grid-element(4, 2%);
  }
}