使用sass的动态页边距/填充

Question

有没有可能使用sass来简化并使其更容易维护？

.padding-8 { padding: 8px !important; }
.padding-10 { padding: 10px !important; }

.padding-top-0 { padding-top: 0 !important; }
.padding-top-3 { padding-top: 3px !important; }

.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-bottom-3 { padding-bottom: 3px !important; }
.padding-bottom-5 { padding-bottom: 5px !important; }

.margin-top-0 { margin-top: 0 !important; }
.margin-top-5 { margin-top: 5px !important; }

.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-5 { margin-bottom: 5px !important; }

等等。

是否也可以编写类似.padding-$dir-$value { padding-$dir: $value px !important; }的代码，这样您就可以使用带有f.ex -left-13的类了？

Answer 1

1. 使用要混合的属性创建两个映射。
2. 为每个组合创建一个占位符类。我认为如果您不想创建一个可能不会使用的类的完整列表，那么它是合适的。这是模块友好的用法。
3. 在你的元素中扩展类。

$paddingDirection:('right'，'left'，'top'，'bottom')；$paddingLength:(15,30,45,50)；@ $dir in $paddingDirection{ @each $len in $paddingLength{ %padding-#{$dir}-#{$len}{ padding-#{$dir}：#{$len}px;} ..any$len{@Exten%Padding%PaddingRight-30；} /*output*/ .any-$dir{padding: 30px；}

原始答案here

Answer 2

你可以使用这个：(增强了上面的解决方案)

$paddingDirection:('right','left','top','bottom');
$paddingLength:(15,30,45,50);
// if you only wants to use "padding" without postfix
@each $len in $paddingLength {
  .padding-#{$len} { padding: #{$len}px;}
}

// if you want to use padding-left, padding-right etc.
@each $dir in $paddingDirection {
  @each $len in $paddingLength {
    .padding-#{$dir}-#{$len} { padding-#{$dir}: #{$len}px;}
  }
}

usage:
<div class="padding-15"></div>
<div class="padding-left-15 padding-top-15"></div>