Сокращение CSS для позиционирования

Есть ли сокращение для top right bottom left или для width и height?

У меня много css, как это

#topDiv {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:100px;
}
#centerDiv {
    position:absolute;
    top:100px;
    bottom:120px;
    left:0px;
    right:0px;
}
#consoleDiv {
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:120px;
}

Я хотел бы сделать что-нибудь подобное

position: absolute 10px 50px 50px 100px;

или

size: 400px 200px;

Ответы

Ответ 1

Не существует коротких рук для объединения всех этих значений. Все это разные свойства, в отличие от, например, background, который имеет цвета, изображения, позиции и повторяющиеся инструкции и как таковые могут быть объединены в короткую форму.

Если вам действительно нужен этот тип управления, вы можете использовать что-то вроде SASS и создать mixin.

Ответ 2

Ответ - нет, поскольку они являются разными свойствами, поэтому их нельзя комбинировать. Однако вы можете немного упростить свой CSS, а не повторять определенные свойства, например:

#topDiv,
#centerDiv,
#consoleDiv {
    position:absolute;
    left:0;
    right:0;
}
#topDiv {
    top:0;
    height:100px;
}
#centerDiv {
    top:100px;
    bottom:120px;
}
#consoleDiv {
    bottom:0;
    height:120px;
}

Ответ 3

Если вам нужна стенография этого, вам нужно будет сделать так называемое микширование с Сасс. Не знаете, что это такое? Посмотрите это!

@mixin position($position, $args) {
  @each $o in top right bottom left {
        $i: index($args, $o);

    @if $i and $i + 1< = length($args) and type-of(nth($args, $i + 1)) == number  {
          #{$o}: nth($args, $i + 1);
    }
  }

  position: $position;
}

@mixin absolute($args) {
        @include position("absolute", $args);
}

@mixin fixed($args) {
        @include position("fixed", $args);
}

@mixin relative($args) {
        @include position("relative", $args);
}

Здесь ссылка, которая объясняет это:

http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/

Ответ 4

Я только что нашел это, искал то же самое, в итоге я использовал sass для верхнего, нижнего, левого, правого

вот мое решение

@mixin position($top, $right: $top, $bottom: $top, $left: $right) {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
 }

работает как большинство сокращений css

@include position(5) // all 4

@include position(5,4) // vertical, horizontal

@include position(5,4,3) // top, horizontal, bottom

@include position(5,4,3,2) // top, right, bottom, left