具有十进制值的多个变量的每个循环的 SCSS

Question

我在使用小数的多个变量的 SASS @each 循环中遇到问题。我可以让它在基本级别上工作，但想添加小数，这会引发错误。

例如..

$columns: 100, 25, 33;

@each $proportion in $columns {
  .col_#{nth($proportion, 1)} {
    width: percentage($proportion/100);
  }
}

...将成功编译为...

.col_100 {
    width: 100%;
}

.col_25 {
    width: 25%;
}

.col_33 {
    width: 33%;
}

但是，尝试向变量列表添加小数会引发错误。例如，我怎样才能让它工作......

$columns: 100, 25, 33.333;

Answer 1

您可以对类名的值进行四舍五入：

@each $proportion in $columns {
  .col_#{floor(nth($proportion, 1))} {
    width: percentage($proportion/100);
  }
}

输出：

.col_100 {
  width: 100%;
}

.col_25 {
  width: 25%;
}

.col_33 {
  width: 33.333%;
}