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 padding-left-13的类？

Answer 1

制作两张包含您要混合的属性的地图。
对于每个组合，创建一个占位符类。如果您不想创建可能无法使用的完整课程列表，我认为这是合适的。这是模块化友好的用途。

扩展元素中的类。

$paddingDirection:('right','left','top','bottom');
$paddingLength:(15,30,45,50);

@each $dir in $paddingDirection{
  @each $len in $paddingLength{
    %padding-#{$dir}-#{$len}{ padding-#{$dir}: #{$len}px;}
  }
}

.any-class{
  @extend %padding-right-30;
}

/*output*/
.any-class {
   padding-right: 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>

动态边距/填充与sass

2 个答案: