CSS Abkürzung für Positionierung

Question

Es gibt jede Abkürzung für toprightbottomleft oder für width und height?

Ich habe eine Menge von CSS wie diese

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

Ich mag so etwas wie diese

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

oder

size: 400px 200px; 

Answer 1

keine Kurz Hand tun, besteht alles zu kombinieren dieser Werte. Dies sind alle verschiedene Eigenschaften, im Gegensatz, zum Beispiel background, die Farben, Bilder, Positionen und Wiederholungsanweisungen und als solche kann in einer Kurzfassung Form zusammengeführt werden.

Wenn Sie wirklich diese Art der Steuerung wollen, könnten Sie so etwas wie SASS verwenden und ein mixin erstellen.

Answer 2

Die Antwort ist nein, da sie unterschiedliche Eigenschaften sind, können so nicht kombiniert werden. Sie können Ihre CSS ein wenig eher als Wiederholung bestimmter Eigenschaften jedoch konsolidieren, z:

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

Answer 3

Wenn Sie eine Abkürzung für diese wollen, du wirst Notwendigkeit zu machen, was eine mixin mit Sass genannt wird. Weiß nicht was es ist? Schlag es nach!

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

Hier ist ein Link, der es erklärt:

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

Answer 4

ich dies gerade gefunden wurde für den gleichen sucht, landete ich für oben mit sass nach oben, unten, links, rechts

hier ist meine Lösung

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

Werke wie die meisten CSS-Kürzeln

@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