Less.js: Функция CSS3 calc () не работает с LESS

Созданный на 8 окт. 2012 · 51Комментарии · Источник: less/less.js

Я знаю, что об этом уже сообщалось, но ошибки были закрыты из-за недостатка информации.

У меня есть следующий код CSS:

#id1 {
    position: fixed;
    left: 0; top: 0;
    width: 130px;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - 130px);
}

Я хотел преобразовать его в LESS, используя 130px в качестве параметра, но calc интерпретируется LESS, и это:

<strong i="11">@id1width</strong>: 130px
#id1 {
    position: fixed;
    left: 0; top: 0;
    width: @id1width;
}
#id2 {
    position: fixed;
    right: 0; top: 0;
    width: calc(100% - @id1width);
}

преобразует предпоследнюю строку в width: calc(-30%); что явно не то, что нужно. Я пробовал использовать width: ~"calc(100% - @id1width)"; но из-за этого @id1width не интерпретируется.

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

Источник

mgol

👍13 ❤2 😄2

Самый полезный комментарий

они, вероятно, были закрыты как дубликаты .. хотя я не могу найти ни одного о калькуляторе .. см. # 146 # 122 и # 915

обходной путь: width: ~"calc(100% - @{id1width})"; - обратите внимание на фигурные скобки вокруг переменной.

Мы переходим к системе, в которой для решения этой проблемы будут оцениваться только вещи, заключенные в скобки.

lukeapage 8 окт. 2012

👍51 🎉11 ❤6 😄5

Все 51 Комментарий

они, вероятно, были закрыты как дубликаты .. хотя я не могу найти ни одного о калькуляторе .. см. # 146 # 122 и # 915

обходной путь: width: ~"calc(100% - @{id1width})"; - обратите внимание на фигурные скобки вокруг переменной.

lukeapage 8 окт. 2012

👍51 🎉11 ❤6 😄5

: +1:

shankarcabus 18 дек. 2012

<strong i="5">@rows</strong>: 10;

<strong i="6">@row1</strong>: 1 / <strong i="7">@rows</strong> * 100%;

.featured1
{
  top: ~'-webkit-calc(@{row1} + 20px)';
  right: 0;
  bottom: @row5;
  left: @col9;
}

Этот бит LESS обработает значение ' @ row1 ' равным 10%, что отлично. Но когда он находится внутри экранированной секции LESS и завернут в фигурные скобки, чтобы сохранить переменную LESS, он возвращает «10» без «%».

Я нашел обходной путь, который меня еще не подвел. Если вы поместите другой символ '%' после закрывающего фигурного элемента переменной 'row1' внутри экранированного кода, он будет работать правильно ...

~'-webkit-calc(@{row1}% + 20px)';

Но это похоже на хитрость, чтобы добавить другой тип единицы измерения, который, как предполагается, уже присутствует в переменной.

jonjohnjohnson 19 дек. 2012

@jonjohnjohnson это исправлено в голове и будет в 1.3.2

остальная часть этой ошибки будет устранена в 1.4.0

lukeapage 19 дек. 2012

Не уверен, что это та же проблема, но у меня проблема со следующим. Обратите внимание, что здесь нет менее специфических вещей, меньше 1.3.3 искажает корректный CSS.

Вот CSS

html, body {
    margin:0, padding:0, border:0;
    height: 100%;
}

#content {
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
    background-color:gray;
}

#footer {
    background-color:black;
}

А вот HTML-код для его включения

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet/less" type="text/css" href="test.css" />
<script src="less-1.3.3.min.js"></script>
<body>
<div id="content"></div>
<div id="footer" style="height:40px"></div>
</body>
</html>

"content" устанавливается на высоту 60%, поэтому меньше анализирует и неправильно разрешает выражение calc, а не передает его без изменений в браузер. Протестировано в Safari 6.0.2 и Firefox.

faceless2 14 янв. 2013

Исправлено на мастере для 1.4.0

lukeapage 2 февр. 2013

height: ~"calc(100% - 50px)";

по-прежнему производит:

height: calc(50%);

для меня. Я хочу:

height: calc(100% - 50px);

OliverJAsh 3 июн. 2014

Более того, он по-прежнему производит height: calc(50%); даже если для строгой математики установлено значение on .

OliverJAsh 3 июн. 2014

@OliverJAsh Я не могу воспроизвести ваши результаты с помощью Less 1.7.0 (как экранированное значение, так и --strict-math:on работают должным образом) ... Не могли бы вы предоставить более подробную информацию о компиляторе / среде / скриптах, которые вы используете? (На всякий случай возникла проблема со скриптом сборки Bootstrap, которая могла привести к таким некорректным результатам: https://github.com/twbs/bootstrap/issues/13604, может быть, это и ваш случай?).

seven-phases-max 3 июн. 2014

У меня была эта проблема в 1.6.3 (по какой-то причине WinLESS блокирует компиляцию, когда я обновляюсь до 1.7.x, поэтому я пока придерживаюсь 1.6.x)

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

height: calc(~"100%" - unit(<strong i="7">@var</strong>, px));

Это работает даже для переменных, например <strong i="10">@var</strong>: 50 . Или вы можете избежать всего расчета, например calc(~"100% - 50px");

twiginteractive 26 июл. 2014

👍5

@twiginteractive Если вам нужно использовать экранирование с помощью --strict-math option off (настройка по умолчанию), то это не проблема, а ожидаемое поведение. См. --strict-math .

seven-phases-max 26 июл. 2014

👍1

@ seven-phase-max Хммм - согласно документам, при выключенном SM (по умолчанию) это _должно_ быть правильно проанализировано (т.е. нетронутым)
height: calc(100% - 10px);

Но это не так. Выходной CSS - height: calc(90%); , что не является желаемым результатом. Возможно, это исправлено в версии 1.7, но, как я уже сказал, я не могу использовать эту версию прямо сейчас, пока не выясню, что нарушает компиляцию WinLESS.

(Если я неправильно читаю документацию, когда там написано «будет обработано правильно» ... LESS не может знать значение 100%, поэтому он не должен выполнять математические вычисления на «100% - 10 пикселей»)

twiginteractive 26 июл. 2014

@twiginteractive

согласно документам, при выключенном SM (по умолчанию) это должно быть правильно проанализировано (т.е. нетронутым)

Нет, слово там currently not correctly (т.е. "будет _ обрабатываться_ в настоящее время").

seven-phases-max 26 июл. 2014

@ seven-phase-max Ах, плохо, теперь это имеет смысл. Спасибо за разъяснения.

twiginteractive 27 июл. 2014

height: ~ "calc (100% - 50px)"; Работал у меня.

aamirshahzad 5 сент. 2014

👍18 🎉5

~~Здесь Less.js начинает возиться с вашим кодом.~~

height: _calc(50%);
height: calc(100% - 50%); /* browser-native */

stevenvachon 5 сент. 2014

@stevenvachon

Предположительно v2.0 будет иметь возможность префикс своих функций следующим образом:

Это никак не повлияет на calc . Нет встроенной функции calc , Less просто оценивает математическое выражение в соответствии с его (Less's) правилами. Вот и все. Если вы не хотите этого "беспорядка", используйте --strict-math .

seven-phases-max 5 сент. 2014

Ps решение этой проблемы - строгая математика. И, может быть, нам стоит
принудительно использовать строгую математику при вызове функции calc?

lukeapage 5 сент. 2014

~~Проблема расширяется при использовании Myth after Less.~~

stevenvachon 5 сент. 2014

Почему? Убирает ли миф скобки? Строгая математика делает менее подходящим расширенным набором
из css.

lukeapage 5 сент. 2014

И, может быть, нам следует принудительно использовать строгую математику при вызове функции calc?

Мы обсуждали это в # 1872, и есть несколько аргументов против обходных путей "локальной строгой математики: on ". Предлагаемое решение (еще не совсем определенное) находится в # 1880.

seven-phases-max 5 сент. 2014

@stevenvachon

Даже со strictMath нам нужно ~ "calc (...)", чтобы Less игнорировал его.

Пример? Т.е. фрагмент, в котором Less привинчивает выражение внутри calc к --strict-math=on .

seven-phases-max 5 сент. 2014

С каких это пор префикс v2 будет работать? Мы это решили, а я забыл?

lukeapage 6 сент. 2014

С каких это пор префикс v2 будет работать? Мы это решили, а я забыл?

Нет. Я думаю, это было просто немного переоценено https://github.com/less/less.js/issues/2102#issuecomment -50286985.

seven-phases-max 6 сент. 2014

Да, извините, не «возможность», а «возможность написать плагин, предоставляющий возможность». ~~Мне придется снова протестировать код с и без ~"" на calc() .~~ Должно быть, некоторое время назад я ошибался и просто продолжал двигаться вперед с этим недоразумением. У меня есть старый код, который мне сейчас нужно изменить.

stevenvachon 6 сент. 2014

Я заметил, что что-то странное происходит с calc при использовании вместе с width . Я поместил все это в код, чтобы было проще: http://codepen.io/anon/pen/OVpJvP

alenb 2 июн. 2015

@alenb

Так что там странного? Код в вашем коде компилируется, как ожидалось ...

seven-phases-max 2 июн. 2015

@ семь фаз-макс

Он скомпилирован, но это не то, что ожидалось. Проверьте код CSS более внимательно.

Это странно, потому что в нем все еще есть зазор справа, хотя он должен полностью растягиваться с 3 столбцами. Первые два столбца должны иметь размер 33,33% минус 20 пикселей, а последний столбец - 33,33%. Первые 2 столбца будут иметь padding-right 20 пикселей, но это не отражается, так как, очевидно, есть пробел в крайнем правом углу.

Я больше играл с ним вчера вечером, и margin-right вместо padding-right помогает и решает проблему.

alenb 3 июн. 2015

@alenb

Он скомпилирован, но это не то, что ожидалось. Проверьте код CSS более внимательно.

Да, конечно. Так что если вы ожидаете чего-то другого - уточняйте.

Первые 2 столбца будут иметь отступ справа 20 пикселей, но это не отражено.

padding никоим образом не влияет на ширину (если вы не установите конкретный [ box-sizing ] (https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing )), consult [CSS specs](http://www.w3.org/TR/REC-CSS2/box.html). So you simply get : (33% - 20 пикселей) + (33% - 20 пикселей) + 33% = 99% - 40 пикселей -> пикселей, как и ожидалось.

В любом случае это связано исключительно с CSS и не имеет ничего общего с тем, как Less компилирует calc . Нажмите кнопку «просмотреть скомпилированный» в коде кода, и там вы увидите, что ваши операторы calc скомпилированы Less точно в соответствии с тем, что вы указали).

seven-phases-max 3 июн. 2015

@ семь фаз-макс

Я бы подумал, что код сделает это очевидным, но никаких проблем.

Спасибо за информацию!

alenb 3 июн. 2015

Сегодня он все еще не работает с установкой по умолчанию less (с использованием npm).

Пришлось использовать:
min-height: ~"calc(100% - 262px)"; //calc(100% - 262px);

Я не знаю, нормально ли это, поскольку ошибка помечена как «закрытая», но просто хотел сообщить вам.

rkyoku 8 апр. 2016

👍1

@RenaudParis - строгая математика

seven-phases-max 8 апр. 2016

Хорошо, я попробую, спасибо! Но не лучше ли было бы
дефолт? Потому что это довольно удивительно, когда ты не знаешь об этом
параметр.

Спасибо, в любом случае!

Le ven. 8 авр. 2016 в 20:48, Макс Михайлов [email protected] a
écrit:

@RenaudParis https://github.com/RenaudParis --strict-math
http://lesscss.org/usage/#command -line-usage-strict-math
-
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/less/less.js/issues/974#issuecomment -207553212

rkyoku 8 апр. 2016

Но не лучше ли, чтобы это было по умолчанию?

Сделав его значением по умолчанию, вы сломаете множество существующих кодовых баз Less. Однажды (в ~ v1.4.0 ) была попытка сделать его действительным по умолчанию, но затем все было отменено из-за устаревшей обратной совместимости ... Более новый, менее навязчивый метод был разработан в # 1880 (но это еще не реализовано).

seven-phases-max 9 апр. 2016

Хорошо, спасибо, что нашли время объяснить мне это, Макс!

Le sam. 9 авр. 2016 13:46, Макс Михайлов [email protected] а
écrit:

Но не лучше ли было бы
дефолт?
Сделав его значением по умолчанию, вы сломаете множество существующих кодовых баз Less. Один раз
(в ~ v1.4.0) на самом деле была попытка сделать это по умолчанию, но
затем он отменяется из-за устаревшей обратной совместимости ... Более новый,
менее интрузивный метод был разработан на # 1880
https://github.com/less/less.js/issues/1880 (но не реализовано
пока что)).
-
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/less/less.js/issues/974#issuecomment -207776654

rkyoku 9 апр. 2016

Я решил это:

.calc(<strong i="6">@prop</strong>, @val) {
    @{prop}: ~"calc(~'@{val}')";
    @{prop}: ~"-moz-calc(~'@{val}')";
    @{prop}: ~"-webkit-calc(~'@{val}')";
    @{prop}: ~"-o-calc(~'@{val}');"
}
.calc(width, "80% - 36px");

Когда я использую command line это правильно. Только less-loader неверно. Итак, я нашел это решение в stackoverflow

Я копирую его в свой код, но, к сожалению, это тоже неверно. Итак, я кое-что изменил. Оно работает!

К сожалению, командная строка неверна !! 😂 😂 😂

mqliutie 1 сент. 2016

Не уверен, почему этот вопрос закрыт. Не имеет смысла, что Less изменит собственное поведение CSS.

vincentmorneau 3 нояб. 2016

... Less изменит собственное поведение CSS.

Это не так. Просто установите --strict-math=on (по умолчанию не включено из-за совместимости с огромным количеством проектов Less в зависимости от --strict-math=off , плюс несколько соображений, упомянутых в # 1880).

seven-phases-max 4 нояб. 2016

👍1

В теме UIkit 3 я использую это в my_theme.less :

height: ~"calc(100vh - 20px)";

И это работает.

oshihirii 6 авг. 2017

👍4 😕1

Это сработало для меня при записи в файл * .less https://github.com/less/less.js/issues/974#issuecomment -9229470

Спасибо @lukeapage ! 🥇

quytm2239 16 окт. 2017

Привет, @mqliutie, спасибо за добавление предложения

миксин должен быть

.calc(<strong i="8">@prop</strong>, @val) {
    @{prop}: ~"-webkit-calc('@{val}')";
    @{prop}: ~"-moz-calc('@{val}')";
    @{prop}: ~"calc('@{val}')";
}

Введите следующие данные:
.calc (ширина, «100% - 60 пикселей»);

Вывод следующий:
ширина: calc (100% - 60 пикселей);

ciaranlp 19 окт. 2017

Почему этот вопрос закрыт ?! Это не исправлено.

Я все еще получаю calc(30%) когда пишу calc(50% - 20px) . Это никогда не то , что кто -то хочет. Помимо того факта, что слепо вычислять с разными единицами измерения неправильно , следует оставить это как есть в calc (), если только он не может быть рассчитан со 100% надежностью (например, те же единицы). Я использую LESS 2.7.3.

Пожалуйста, откройте эту проблему повторно.

thany 25 янв. 2018

👍1

@thany
Обратитесь к этим комментариям, они описывают, что это не совсем проблема, поскольку настройка математической обработки по умолчанию является побочным продуктом истории, и вы всегда можете изменить настройку по умолчанию.
https://github.com/less/less.js/issues/974#issuecomment -207553212
https://github.com/less/less.js/issues/974#issuecomment -207776654

jonjohnjohnson 25 янв. 2018

@jonjohnjohnson Это снова проблема. Если строгий режим исправляет это (еще не пробовал, не обязательно включать все виды нестандартных флагов, чтобы обойти ошибки), тогда он должен быть включен по умолчанию.

Как ни крути, этот вопрос никаким определением не устраняется.

thany 26 янв. 2018

@thany Я просто пытался помочь вам понять, что разработчики решили, что это не проблема, по их мнению. Эти комментарии не просто повторяют проблему, они описывают позицию разработчиков по этой проблеме. Удачи.

jonjohnjohnson 26 янв. 2018

@thany

тогда он должен быть включен по умолчанию.

Этого не может быть, потому что это немедленно разрушит миллионы проектов. Поэтому, если вы относитесь к поведению по умолчанию как к проблеме, просто установите задокументированный параметр и готово. По любому определению.

Почему этот вопрос закрыт ?!

Поскольку UpToDate disscussion о том , как улучшить поведение по умолчанию является здесь .

seven-phases-max 26 янв. 2018

@thany Как @ seven- проблема была решена, внесите свой вклад в # 1880. Я думаю, что решение есть, но не было достаточного взвешивания сообщества, чтобы прийти к решению, которое готово к реализации. Это длинная цепочка, но именно это и требуется для поиска решения: рассмотрение предложений и взвешивание тем или иным образом. А потом: кто-то возьмет на себя работу по реализации.

matthew-dean 27 янв. 2018

 width: 15%;
 height: ~"calc(width)";

как сделать высоту = ширину

xiaomizhou66 18 нояб. 2018

👍1

@ xiaomizhou66
Это не имеет ничего общего ни с LESS, ни с этой проблемой. Это чисто вопрос CSS. Пожалуйста, поищите что-нибудь вроде "css keep аспект", и вы найдете несколько ответов.

thany 26 нояб. 2018

Так что это все еще не работает. calc (100vh - 138px) получается -38px.

willatathena 15 мар. 2019

@willatathena

Если вы столкнулись с этой проблемой в Less 3.x, пожалуйста, создайте отдельный отчет об ошибке.
Для более ранних версий Less это ожидаемое поведение по умолчанию (прочтите сообщения выше, чтобы узнать, как с этим справиться).

seven-phases-max 16 мар. 2019

Была ли эта страница полезной?

0 / 5 - 0 рейтинги