SASS 使用 % 符号指定宽度答案

【问题标题】：SASS using % sign to specify widthSASS 使用 % 符号指定宽度
【发布时间】：2018-01-18 19:08:49
【问题描述】：

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

$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})%; 这个表达式有问题。不能同时使用%和;签名。

【问题讨论】：

标签： css sass

【解决方案1】：

只要写width: 100% / $grids;

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

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

萨斯迈斯特demo.

【讨论】：