Question

第一次问这里。

我试图制作一些MIXIN来设置元素的高度。

例如，CSS中的< span class="space h5" >< /span >就是：

$size: 1px;

.space {

display: block;

}

.space.x5 {

height: $size * 5;

}

所以我的问题是，是否可以创建一个mixin来乘以，加上或减去金额与类？

例如

< span class=" space h5 x2 add4 ">< /span > ====> height: 14px

或：

< span class=" space h5 x4 subtract2 ">< /span > ====> height: 18px

非常感谢！

问候。

Answer 1

@mixin height-special($default,$multiplier: 1,$extra: 0) {
  height: ($default*$multiplier+$extra) + px;
}

因此，height-special（5,2,4）将返回14 你可以省略最后的2，它将返回默认值。

Answer 2

这是一个很好的解决方案，但我正在寻找更像循环的东西：

.space {
  display: block;
  clear: both;
}

$space-base: 5px;

/*multipliers*/
@for $space-base from 1 through 100 {
  .h5x#{$space-base} {
    height:  $space-base * 5px;
  }
}

/*add*/
.h5x2.add-1 {
  height: ($space-base * 2  + 1);
}
.h5x2.add-2 {
  height: ($space-base * 2  + 2);
}
.h5x2.add-3 {
  height: ($space-base * 2  + 3);
}
.h5x2.add-4 {
  height: ($space-base * 2  + 4);
}
.h5x2.add-5 {
  height: ($space-base * 2  + 5);
}
.h5x2.add-6 {
  height: ($space-base * 2  + 6);
}
.h5x2.add-7 {
  height: ($space-base * 2  + 7);
}
.h5x2.add-8 {
  height: ($space-base * 2  + 8);
}
.h5x2.add-9 {
  height: ($space-base * 2  + 9);
}
/*subtract*/
.h5x2.sub-1 {
  height: ($space-base * 2  - 1);
}

我试图通过手动避免所有组合并使用SASS进行。

SASS：MIXIN设定高度

2 个答案: