简写定位(CSS shorthand for positioning)

有任何速记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; 

Answer 1:

无速记存在于所有这些值的组合。 这些都是不同的性质，不同的是，例如background ，其具有颜色，图像，位置，重复的说明，因此可以被合并成一个速记形式。

如果你真的想这种类型的控制，你可以使用类似SASS，并创建一个混入 。

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

Answer 3:

我刚刚发现这一点，是寻找同样的，我结束了使用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

Answer 4:

如果你想为这个速记，你会需要做什么叫做与萨斯一个mixin。 不知道它是什么？ 关注一下吧！

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

文章来源: CSS shorthand for positioning