具有十进制值的多个变量的每个循环的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%;
}