Question

有没有人知道一个解决方案 - sass，npm或者其他什么 - 组成速记形式没有速记属性？

例如：

padding-top: 10px;
pading-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

应呈现给：

padding: 10px 20px 30px 40px;

我更愿意在我的sass文件中显式写出所有属性，但当然喜欢在我的css中保存字节。如果还有背景，边界，......和

的方法，那将是一个很大的好处

欢呼声

Answer 1

我能想到实现你想要的东西的唯一方法是做这样的事情：

@mixin shorthand($props) {
  $keys: map-keys($props);
  $main: str-slice(nth($keys, 1), 0, str-index(nth($keys, 1), '-') - 1);
  $top: map-get($props, #{$main}-top);
  $right: map-get($props, #{$main}-right);
  $bottom: map-get($props, #{$main}-bottom);
  $left: map-get($props, #{$main}-left);

  #{$main}: $top $right $bottom $left;
}

.foobar {
  @include shorthand((
    padding-top: 10px,
    padding-right: 20px,
    padding-bottom: 30px,
    padding-left: 40px
  ));

  @include shorthand((
    margin-top: 10px,
    margin-right: 20px,
    margin-bottom: 30px,
    margin-left: 40px
  ));
}

结果是：

.foobar {
  padding: 10px 20px 30px 40px;
  margin: 10px 20px 30px 40px;
}

sass - 从非速记属性创建速记属性

1 个答案: