0

LESS を利用して、各ボックス間の間隔が均一なボックスの複雑なレイアウトを作成しようとしています。絶対配置ボックスをそれぞれ再調整することなく、間隔を簡単に変更できるようにしたいと考えています。簡単な例を次に示します ((.one > height) + @spacingと(.one > width) + @spacingは、私が達成しようとしているものの疑似コードです)。これは可能ですか？

@spacing: 4px;

.box {

  position: absolute;

  &.one {
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
  }

  &.two {
    top: (.one > height) + @spacing;
    left: (.one > width) + @spacing;
    width: 100px;
    height: 100px;
  }

}

解決

変数を使用する必要がありましたが、同じ目標を達成します。

@spacing: 4px;

.box {

  position: absolute;
  background: white;

  @one-width: 100px;
  @one-height: 100px;

  @two-width: 100px;
  @two-height: 100px;

  &.one {
    top: 0;
    left: 0;
    width: @one-width;
    height: @one-height;
  }

  &.two {
    top: 0;
    left: @one-width + @spacing;
    width: @two-width;
    height: @two-height;
  }

}
4

1 に答える 1

1

私はそうは思わない。「&.one」の高さと幅の変数を作成する方が良いかもしれません:

@oneHeight: 100px;
@oneWidth:  100px;
@spacing:   4px;

.box {

  position: absolute;

  &.one {
    top: 0;
    left: 0;
    width: @oneWidth;
    height: @oneHeight;
  }

  &.two {
    top: @oneHeight + @spacing;
    left: @oneWidth + @spacing;
    width: 100px;
    height: 100px;
  }

}

次に、3 つまたは 4 つの異なる高さと幅の変数を作成して、複雑なレイアウトを作成できます。

于 2013-06-01T21:47:43.893 に答える