sass动态宽度

Question

我正在使用

.w400 { 
  width: 400px; 
}

.w110 {
  width: 110px;
}

.w600 {
  width: 600px;
}

是否可以使用sass制作动态类？

类似

.w(size) {
    width: size+px
}

Answer 1

如果您希望能够使用任意.w(something)类，我相信（见下文）Sass无法实现。但是，如果您事先知道所需的大小，可以使用带有参数的mixins来生成类。像这样：

@mixin width-class($size) {
  .w#{$size} {
    width: $size * 1px;
  }
}

您可以这样使用它：

@include width-class(400);
@include width-class(110);

这将生成以下CSS：

.w400 {
  width: 400px; }

.w110 {
  width: 110px; }

现在，如果你想避免为每个类写一个新的@include行，你可以创建另一个mixins（或将两个mixin合并为一个）：

@mixin dynwidths($size-list) {
  @each $size in $size-list {
    @include width-class($size)
  }
}

现在你可以传递一个宽度列表。这会生成与上面相同的CSS：

@include width-classes(400 110);

---

注意：这只是猜测，但通过使用Ruby扩展Sass可能是通配符类名。但是，我不确定这是否是一个理想的功能。