Я пытаюсь использовать 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;
  }

}
0
David Jones 2 Июн 2013 в 01:17

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 различных высоты и ширины и сделать сложный макет.

1
Vinicius 2 Июн 2013 в 01:47
Идеально. Я решил, что это правильный путь, и ваш ответ подтверждает это. Спасибо!
 – 
David Jones
2 Июн 2013 в 01:51