SASS使用％符号指定宽度

Question

根据网格大小，我想要一些动态。以下是我正在尝试的代码：

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

应该表现得像：
假设2有两个列结构

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

然后CSS应该像

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

这里，(100/#{$grids})%;这个表达式有问题。 无法一起使用%和;签名。

Answer 1

只需撰写width: 100% / $grids;

即可

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

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

Sassmeister demo。