Question

我有一些类似的CSS类，只有两件事情会发生变化：name和width。

例如：

.col25 {
    float: left;
    width: 25%; // matches name
}
.col30 {
    float: left;
    width: 30%; // matches name
}
.col50 {
    float: left;
    width: 50%; // matches name
}

这是我能想到的最接近的目标：

@each $col in 25, 33, 50 {
  .col-#{$col} {
    float: left;
    width: $col + %;
  }
}

http://codepen.io/anon/pen/jcdJt

但我不能只追加%。

使用SASS写这个的最佳方法是什么，并允许我在需要时轻松添加更多？

Answer 1

我找到了解决方案。我不得不使用percentage函数：

@each $item in 25 33 50 {
  .col-#{$item} {
    float: left;
    width: percentage($item / 100);
    }
}

编译：

.col-25 {
  float: left;
  width: 25%;
}

.col-33 {
  float: left;
  width: 33%;
}

.col-50 {
  float: left;
  width: 50%;
}

使用带有数字的每个循环作为SASS的名称和属性

1 个答案: