不带Calc（）的基于雷姆的排水沟

Question

我正在构建一个网格系统，我对到目前为止所拥有的一切感到非常满意。我的主要问题是使排水沟能够正确计算。我想要分割页边距（列每侧的边距和行上的负页边距）。但我无法找出最佳方法或有关此问题的数学方法。我想要基于rem的边距，而不在sass中使用calc（）函数。

这可行吗？

如果有人可以向我指出正确的方向，或者有帮助的链接，将不胜感激。

Sassmeister链接

https://www.sassmeister.com/gist/31ad1059e96fb709f8463c85be5a042f

// ----
// Sass (v3.5.6)
// Compass (vundefined)
// ----

//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%
);






$font-size: 16px;
@function rem($size) {
    $remSize:$size / $font-size;
    @return #{$remSize}rem;
}


//Mixins for Grid
@mixin createGutters() {
  @each $key, $value in $__grid--gutters {
    //Media Query Mixin{

    // }
  }
}
@mixin createCells() {
  @each $key, $value in $__grid--breakpoints {
    @media screen and (min-width:$value){
      @for $i from 1 through $__grid--columns {
        &.#{$key}-#{$i}{
          //gutterFunction();
          flex-basis:(100 / ($__grid--columns / $i) * 1%);
          //Offset
          margin-left:(100 / ($__grid--columns / $i) * 1%);
        }
      }  
    }
  }
}
.container {
    position:relative;
}
//Spit out the cells
.row,
.column{
  display:flex;
  flex-wrap:wrap;

}

.column {
    flex-direction:column;
    flex-wrap:nowrap;
}
.row {
  flex-wrap:wrap;
}

.cell {
  background-color:blue;
  @include createCells;
}








//Styles not needed for grid
// * {
//   box-sizing:border-box;
// }
// .color {
//   padding:10px;
//   background-color:salmon;
// }
















// @mixin create-mq($breakpoint) {
//   @if($breakpoint == 0) {
//     @content;
//   } @else {
//     @media screen and (min-width: $breakpoint *1px) {
//       @content;
//     }
//   }
// }

// @mixin create-col-classes($modifier, $grid-cols, $breakpoint) {
//   @include create-mq($breakpoint) {
//     &__col#{$modifier}-offset-0 {
//       margin-left: 0;
//     }
//     @for $i from 1 through $grid-cols {
//       &__col#{$modifier}-#{$i} {
//         flex-basis: (100 / ($grid-cols / $i) ) * 1rem;
//       }
//       &__col#{$modifier}-offset-#{$i} {
//         margin-left: (100 / ($grid-cols / $i) ) * 1rem;
//       }
//     }
//   }
// }

// .container {
//   max-width: $grid__bp-md * 1px;
//   margin: 0 auto;
//   &--fluid {
//     margin: 0;
//     max-width: 100%;
//   }
//   &__row {
//     display: flex;
//     flex-wrap: wrap;
//     width: 100%;
//   }
//   @each $modifier , $breakpoint in $map-grid-props {
//     @include create-col-classes($modifier, $grid__cols, $breakpoint);
//   }
// }

// //Styling of grid for demostration purposes
// .container {
//   background-color: #88d8b0;
//   padding: 10px;
//   box-sizing: border-box;
//   &__row {
//     background-color: #ffeead;
//     &.nested {
//       background-color: #ffcc5c;
//     }
//   }

//   @at-root {
//     [class*='container__col-'] {
//       &.higher {
//         min-height: 60px;
//       }
//       min-height: 30px;
//       background-color: #ff6f69;
//       outline: 1px solid #ffcc5c;
//       display: flex;
//       align-items: center;
//       justify-content: space-around;
//     }
//   }
// }