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

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

我不这么认为。也许为“&.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 个不同的高度和宽度变量并制作复杂的布局