Вопрос по css – CSS сокращение для позиционирования

45

Есть какие-то сокращения для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; 
У CSS этого нет. Тем не менее, вы можете использовать CSS-фреймворк (например, LESS), чтобы создать такое поведение (используя Parametric Mixins). Aziz
@jasssonpet пример значений был произвольным, в любом случае, спасибо. Vitim.us
Создайте .class с {position: absolute; Слева направо: 0; право: 0; } jasssonpet

Ваш Ответ

4   ответа
8

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

вам нужно сделать так называемый миксин с 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/

29

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

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

Будет ли SASS излишним для этого?
Я бы хотел, чтобы это было Vitim.us
@HelloWorldNoMore Вы можете определенно использовать это; или сверните свое собственное решение, используяPostCSS.
7

искал то же самое, я закончил тем, что использовал 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

Похожие вопросы