SCSS值倍数

Question

我正在尝试用scss做点什么。我基本上想要它，所以每5px可以有任何余量。所以例如我可以写m10 m15 m20 m25等...它将创建保证金：10px;保证金：15px的;等...

到目前为止，我有：

@for $margin from 0 through 100 {
  .m#{$margin} { margin: 1px * $margin }
}

但是这会使所有数字都在5的倍数之间，这是不理想的。是否可以仅为5的倍数渲染边距？

先谢谢。

Answer 1

您可以这样做：

@for $margin from 0 through 100 {
  @if $margin % 5 == 0 {
    .m#{$margin} { margin: 1px * $margin }
  }
}

您认为这就是您要找的。

Answer 2

在编写循环时，不要考虑所需的边距大小，而是需要多少边距：

@for $margin from 0 through 20 {
  .m#{$margin * 5} { margin: 5px * $margin }
}

Answer 3

我会建议另一种方法，使用SASS mixins：

// Define a mixin to create custom margin width:
@mixin custom-margin($margin_width) {
  margin: $margin_width
}

然后，您可以为任何元素创建自定义边距：

h1   { @include custom-margin(10px); }
span { @include custom-margin(0); }
.box { @include custom-margin(5px); }