web-dev-qa-db-fra.com

Raccourci CSS pour le positionnement

Il existe des raccourcis pour toprightbottomleft ou pour width et height?

J'ai beaucoup de css comme ça

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

J'aimerais faire quelque chose comme ça

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

ou

size: 400px 200px;
csscss-position
47
Vitim.us

Il n'existe pas de raccourci pour combiner toutes ces valeurs. Ce sont toutes des propriétés différentes , contrairement à, par exemple, background, qui a des couleurs, des images, des positions et des instructions de répétition et en tant que telles peut être fusionné en une forme abrégée.

Si vous vouliez vraiment ce type de contrôle, vous pourriez utiliser quelque chose comme SASS et créer un mixin .

33
Sampson

Je viens de trouver ça, je cherchais la même chose, j'ai fini par utiliser sass pour haut, bas, gauche, droite

voici ma solution

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

fonctionne comme la plupart des raccourcis 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

8
Adam Sparks

La réponse est non car ce sont des propriétés différentes et ne peuvent donc pas être combinées. Vous pouvez cependant consolider un peu votre CSS plutôt que de répéter certaines propriétés, par exemple:

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

Si vous voulez un raccourci pour cela, vous devrez faire ce qu'on appelle un mixin avec Sass. Je ne sais pas ce que c'est? Cherchez-le!

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

Voici un lien qui l'explique:

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

2
Andrew