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

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

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

в

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

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

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

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

Менее не оценивает выражение внутри calc по умолчанию, так как v3.00 .


Оригинальный ответ ( Less v1.x...2.x ):

Сделай это:

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

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

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

Это можно сделать так:

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

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

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

Я знаю, что это старо, но есть более аккуратный способ включить переменные внутри экранированного calc, как объясняется в этом сообщении: https://github.com/less/less.js/issues/974

 @variable: 2em; body{ width: calc(~"100% - @{variable} * 2");} 

Используя фигурные скобки, вам не нужно закрывать и снова открывать кавычки.

  • CSS3 transform: rotate; в IE9
  • Как создать многоцветную границу в css3
  • Как настроить таргетинг только на IE (любая версия) в таблице стилей?
  • Эффект блочного gradleиента в CSS3
  • Создание радиального меню в CSS
  • css селектор для соответствия элементу без атрибута x
  • Как нарисовать трапецию / трапецию с css3?
  • Поворот элементов в CSS, которые правильно влияют на их родительскую высоту
  • Форма треугольника с фоновым изображением
  • Почему IE9 переключается в режим совместимости на моем веб-сайте?
  • Укладка стрелки на всплывающих подсказках бутстрапа
  • Interesting Posts

    Как использовать stringstream для разделения разделенных запятыми строк

    Выберите несколько строк в UITableview

    Алгоритм поиска наименьших прямоугольников для покрытия набора прямоугольников без перекрытия

    C # параметризованные запросы для Oracle – серьезная и опасная ошибка!

    Как испускать и обрабатывать пользовательские события?

    Генератор случайных чисел в C # – уникальные значения

    Установка Windows 10 не распознает SSD

    Исправить окна 8 efi MBR – нет успеха

    Размещение переменной в C

    Почему допустимая статическая конечная переменная не разрешена в статическом блоке инициализации?

    Параметры индексирования Windows 10 не могут быть доступны (и поиск в Windows не работает)

    Мониторинг сетевой активности в телефонах Android

    Почему шрифты выглядят перепутанными в Adobe Acrobat?

    Совместить многострочный текст с использованием регулярного выражения

    Может ли Mini DisplayPort к HDMI-кабелю поддерживать разрешение выше 1920×1200?

    Давайте будем гением компьютера.