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(或将两个mixins合并为一个):

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

现在您可以传递一个宽度列表.这会生成与上面相同的CSS:

@include width-classes(400 110);

注意:这只是猜测,但可以通过使用Ruby扩展Sass来实现通配符类名.但是,我不确定这是否是一个理想的功能.