SASS using % sign to specify width

Question

I wanted some dynamic with according to grid size. Below is the code I am trying:

$grid-elements: 1 2 3 4 5 6;
@each $grids in $grid-elements {
  .display-grids-#{$grids} {
    width: (100/#{$grids})%;
  }
}

which should behave like:
suppose 2 have two column structure

<div>
  <div class="display-grids-2"></div>
  <div class="display-grids-2"></div>
</div>

then CSS should be like

.display-grids-2 {
  width: 50%;
}

Here, (100/#{$grids})%; this expression is having problem. Can not use % and ; sign together.

Answer 1

Just write width: 100% / $grids;

$grid-elements: 1 2 3 4 5 6;

@each $grids in $grid-elements {
  .display-grids-#{$grids} {
    width: 100% / $grids;
  }
}

Sassmeister demo.