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; 

Ответы на вопрос(4)

искал то же самое, я закончил тем, что использовал sass для top, bottom, left, right

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

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

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

@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

different свойства, в отличие, например, отbackground, который имеет цвета, изображения, позиции и повторные инструкции и как таковойcan быть объединенным в короткую форму.

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

поскольку они имеют разные свойства, поэтому не могут быть объединены. Однако вы можете немного консолидировать 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;
}

вам нужно сделать так называемый миксин с Sass. Не знаете, что это такое? Поищи это!

@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/

ВАШ ОТВЕТ НА ВОПРОС