Менее агрессивная компиляция с CSS3 calc

Question

Менее агрессивная компиляция с CSS3 calc

255

Используемые мною компиляторы Less (OrangeBits и dotless 1.3.0.5) агрессивно переводя

body { width: calc(100% - 250px - 1.5em); }

в

body { width: calc(-151.5%); }

Это, очевидно, нежелательно. Мне интересно, есть ли способ сообщить компилятору Less, чтобы по существу игнорировать атрибут во время компиляции. Я просмотрел документацию Less и документацию компиляторов, и я ничего не смог найти.

Поддерживает ли это меньше или меньше компилятор?

Если нет, существует ли расширитель CSS?

Nick Babcock 15 авг. 2012, в 14:37

Источник

9

Вы уверены, что не хотите, чтобы компилятор был менее агрессивным?
fiatjaf 15 авг. 2013, в 03:43
0

Я также уверен, что компилятор должен быть более агрессивным! (двойное отрицание в предыдущем комментарии смутило меня;)) (так что мой голос также за приятную особенность ниже)
Andreas Dietrich 08 янв. 2015, в 23:53

Теги:

css

css3

less

compilation

css-calc

3 ответа

33

Очень распространенная утилита calc берет 100% ширину и добавляет некоторый запас вокруг элемента.

Можно сделать это с помощью

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);

Sebastien Lorber 11 июнь 2014, в 16:26

0

-o-calc- пока не поддерживается .
another 08 авг. 2016, в 07:52

23

Существует несколько вариантов экранирования с таким же результатом:

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

icl7126 19 окт. 2015, в 20:43

Ещё вопросы

Вы уверены, что не хотите, чтобы компилятор был менее агрессивным?
Я также уверен, что компилятор должен быть более агрессивным! (двойное отрицание в предыдущем комментарии смутило меня;)) (так что мой голос также за приятную особенность ниже)

Luke Page · Accepted Answer · 2012-08-15T16-58-00.000Z

451

Лучший ответ

сделайте это..

body { width: calc(~"100% - 250px - 1.5em"); }

В less.js 1.4.0 у нас будет опция strictMaths, которая требует, чтобы все меньше вычислений находилось в скобках, поэтому calc будет работать "из коробки". Это вариант, поскольку это серьезное изменение. Ранняя ставка 1.4.0 имела этот вариант по умолчанию. По умолчанию версия выпуска отключена.

Luke Page 15 авг. 2012, в 16:58

0

Brilliant! Большое вам спасибо, я, должно быть, неправильно истолковал часть «Escape» в документации.
Nick Babcock 15 авг. 2012, в 16:45
2

Обратите внимание, что если вы компилируете меньше с перерывом в твиттере, он игнорирует это экранирование . По крайней мере, на момент написания этого комментария.
Attila Fulop 13 нояб. 2012, в 12:12
0

Потрясающие! Это мне очень помогло.
samael 30 май 2013, в 11:45
1

Я только что попробовал calc(100% - 50px) в less.css 1.4.0, и результат был calc(50%) . Удивительный трюк ~"..." продолжает работать, но меня смущает утверждение "из коробки", которое заставляет меня думать, что вышеприведенное сработает. Люк, как меняется поддержка calc в Less 1.4.0? Спасибо!
Brian M. Hunt 11 июнь 2013, в 13:30
0

Я обновил ответ, чтобы быть корректным, учитывая изменения в релизе, спасибо.
Luke Page 25 июнь 2013, в 07:54
1

Вопрос в том, почему less.js пытался вычислить это в первую очередь? Он должен выдавать ошибку для «100% - 250px», так как не может вычислить разумный ответ.
mpen 02 авг. 2013, в 18:33
0

Обновление: я вижу, что есть --strict-units которая предотвращает подобные ошибки. Потрясающие!
mpen 02 авг. 2013, в 19:28
0

Спасибо за этот ответ. Спасло меня много головной боли.
Sean Thompson 27 авг. 2013, в 18:02
0

Это все еще работает? Я когда пытаюсь с calc(~"100% + 20px"); скомпилированный CSS calc(120%); примечание: я использую grunt для создания файлов less и js
b.kelley 15 нояб. 2013, в 17:35
2

Не работает для меня
user1082754 03 июнь 2014, в 16:32
66

Для будущих читателей вы также можете избежать только оператора, что позволит вам также использовать переменные. Пример: calc(@somePercent ~"-" @someLength)
0b10011 07 авг. 2014, в 20:51
0

github.com/dotless/dotless/issues/289
AaronLS 30 янв. 2015, в 20:59
9

Вместо того, чтобы меньше просчитывать это или выдавать ошибку, почему он не может понять, что пытается сделать пользователь, и оставить это в покое? Очевидно, что процент и значение пикселя не могут быть вычислены вместе за меньшее.
dfmiller 09 фев. 2016, в 00:17
0

Эта проблема заставила меня сойти с ума, я на самом деле забыл, что использую меньше, и я не могу понять, почему мой CSS отличается в браузере и в IDE. только через час или около того я понял, о, мы используем LESS правильно, возможно, он получил свой собственный calc и затем приземлился здесь. Благодарю.
Vignesh 08 март 2018, в 09:25

Показать ещё 12 комментариев