web-dev-qa-db-ja.com

ポジショニングのCSS略記

toprightbottomleftまたは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;
csscss-position
47
Vitim.us

これらのすべての値を結合する速記はありません。これらはすべてdifferentプロパティであり、たとえばbackgroundには色、画像、位置、繰り返し命令などがありますを短縮形に結合できます。

このタイプのコントロールが本当に必要な場合は、SASSなどを使用して mixin を作成できます。

33
Sampson

私はこれを見つけたので、同じものを探していました。結局、上、下、左、右に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

8
Adam Sparks

それらは異なるプロパティであるため、答えはノーであり、組み合わせることはできません。ただし、特定のプロパティを繰り返すのではなく、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;
}
8
Dave Haigh

これを簡略化する場合は、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/

2
Andrew