sass - создает сокращенное свойство из не сокращенных свойств

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;
}