Я пытаюсь использовать 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;
}
}
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 различных высоты и ширины и сделать сложный макет.
Похожие вопросы
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.