Используйте 2 переменные Css LESS и вычтите одну из другой

В меньшем у меня есть следующее:

@divwidth: 425px;
@docwidth: '$(window).width()';

Я хотел бы установить левый стиль в результате этого:

left: ((@docwidth - @divwidth + 1)/2)!important;

Я использую +1 на случай, если получу 0 и попытаюсь разделить его на 2.

Кажется, я не могу получить правильное значение и выяснить, правильно ли я это делаю. я пытался

left: ~'((docwidth - divwidth + 1) / 2)px' !important;
left: ~'calc((docwidth - divwidth + 1) / 2)px' !important;

До сих пор нет радости. Я был бы признателен за помощь или хороший ресурс, чтобы понять это...


css less math stylesheet calc
person Makrel    schedule 12.12.2014    source источник
comment
Никогда не видел, чтобы кто-нибудь использовал Javascript внутри LESS... Вы уверены, что он поддерживается? Насколько я знаю, LESS статически трансформируется в CSS, поэтому я не думаю, что это сработает.   -  person Kroltan    schedule 12.12.2014
comment
Глядя на документы, нет упоминания об использовании выражений Javascript, очевидно, ваша идея невозможна только с LESS. Но поскольку вы можете использовать Javascript, почему бы не сделать все это с помощью JS?   -  person Kroltan    schedule 12.12.2014
comment
возможно, вы должны объяснить, чего вы хотите достичь, чтобы найти лучшее решение для вашей проблемы   -  person Bass Jobsen    schedule 13.12.2014
comment
Возможно, вам нужно что-то вроде единицы области просмотра. Используя $(window).width() в своем коде Less, вы действительно напрашиваетесь на неприятности (+100 к ответу Bass Jobsen ниже).   -  person seven-phases-max    schedule 13.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Да, вы можете использовать оценку JavaScript в своем коде Less. Код JavaScript должен быть помещен между обратными кавычками @docwidth: "`$(window).width()`"; , см. также https://stackoverflow.com/a/19386571/1596547 для пример.

Использование JavaScript в Less устарело, потому что альтернативные компиляторы (не написанные на JavaScript) не могут скомпилировать ваш код.

Также обратите внимание, что $(window).width() имеет смысл только при использовании компилятора на стороне клиента. и даже тогда вы должны перекомпилировать свой код после изменения размера окна (вызывая less.refreshStyles()).

В большинстве случаев вы используете less для компиляции статического кода CSS. Статический код CSS не изменяется и не реагирует на свойства среды, такие как $(window).width().

person Bass Jobsen    schedule 12.12.2014
comment
Я попробую... Я проверю свои результаты, спасибо. - person Makrel; 23.12.2014