МЕНЬШЕ: процент высоты и ширины в пикселях и их сложение

В Less я определил:

@height-5: (@winheight / 100) * 5;
@height-10: (@winheight / 100) * 10;
...etc

@winheight происходит от:

@winheight:`$(window).height()`;

(То же самое по ширине)

Теперь я могу использовать:

width: ~"@{width-10}px";
height: ~"@{height-100}px";

Чтобы установить percentage окна как pixels.

Но теперь я хочу рассчитать высоту и ширину, например:

left: @width-80 + @height-10 + "px";

Or:

left: ~"@{width-80 + @height-10}px";

Первый не работает, потому что ставит пробел между value и px

Второй не компилируется, пробовал разные варианты, но безрезультатно.

.

Вторая проблема заключается в том, что я хочу сделать из нее функцию, а не определять каждый процент, я пробовал это:

.winheight (@percentage){
   height: (@winheight / 100) * @percentage;
}

Но когда я пытаюсь сделать это внутри некоторого класса:

.winheight(10)

Я получаю сообщение об ошибке. В принципе, я хотел бы просто как-то вернуть значение, например:

@win_height_perc(@perc):  (@winheight / 100) * @perc;

Вместо того, чтобы определять отдельные функции для height:, width:, top:, left:

(Я обновляю $(window).resize с less.watch(), чтобы обновить пиксели/проценты, кстати)


less percentage
person TrySpace    schedule 16.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы решить вашу первую проблему, вы можете использовать:

left: @width-80 + @height-10 + 0px;

or

left: unit(@width-80 + @height-10, px);

Какую ошибку вы получаете, когда вызываете свой миксин .winheight? Он должен работать нормально (по крайней мере, со статическими переменными, определенными внутри таблицы стилей Less). Это может привести к сбою в зависимости от других факторов, поскольку ваш @winheight зависит от динамического значения DOM (доступ к DOM не гарантируется). В любом случае, вы должны вызывать его с единицей измерения %, если вы хотите, чтобы он обрабатывался как процент:

.winheight(100%)

В Less 1.7 это будет компилироваться:

left: ~"@{width-80 + @height-10}px"

Но просто напечатает строку, генерирующую недопустимый CSS:

left: @{width-80 + @height-10}px
person helderdarocha    schedule 16.03.2014
comment
Спасибо, я думаю, ошибка была из-за пробела между значением и px, но *1px работает, и я думаю, что аналогично +0px работает, потому что тогда LESS просто делает значение px. (Проблема с использованием % для некоторых элементов, что поведение будет нарушено, поэтому я скорее динамически генерирую значения пикселей. Хотя я думаю, что %values ​​не должны изменять поведение элементов и должным образом обрабатываться браузером..) - person TrySpace; 17.03.2014