Question

我正在尝试利用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;
  }

}

Answer 1

我不这么认为。也许最好为'＆amp; .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个不同的高度和宽度变量，并制作复杂的布局

有没有办法在LESS中引用命名空间中的属性？

1 个答案: