Wsrtjtyk

I'm writing some SASS to output several column/row combinations for a grid. It works fine in modern browsers because they all know how to use CSS' repeat() function. But of course, I have to develop for IE11 and Edge...

I have this function that outputs all combinations between 1-12 columns and 1-24 rows (yes, it's a lot of output, but it's necessary).

.grid-container {

  width:calc(100% + 10px);

  margin-left:-5px;

  margin-top:-5px;

  position:relative;



  &.s {



    @for $column from 1 through 12 {

      @for $row from 1 through 24 {

        &#{$column}x#{$row} {



          .grid {

            -ms-grid-columns: 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr;

            -ms-grid-rows: 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr 12fr;

            grid-template-columns: repeat($column, calc((100% / #{$column})));

            grid-template-rows: repeat($row, calc((100% / #{$row})));

            grid-column-gap: 0px;

            grid-row-gap: 0px;

          }

        }

      }

    }

  }

}

Now, I'm trying to figure out how to make the -ms-grid-columns and -ms-grid rows dynamic. Right now, it's just built for a 12x12 grid, but I want them to have the correct number of fr units depending on the outputted grid size.

I found out LESS has a merge function that would work perfectly, but I don't know what that is in SASS