Менш агресивна компіляція з обчисленням CSS3

336

В Менше компілятори, я використовую ( OrangeBits і Dotless 1.3.0.5 ) агресивно переклад

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

в

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

Що, очевидно, не бажано. Мені цікаво, чи є спосіб подати сигнал компілятору Менше, щоб по суті ігнорувати атрибут під час компіляції. Я шукав меншу документацію та документацію обох компіляторів, і нічого не міг знайти.

Чи підтримує це компілятор Less або Less?

Якщо ні, чи існує розширювач CSS?

— Нік Бабкок
джерело

9

Ви впевнені, що не хочете компілятора менш агресивним?

— fiatjaf

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

— Андреас Дітріх

530

Не менш більше не оцінює вираз всередині calcза замовчуванням , так як v3.00.

Оригінальна відповідь ( Less v1.x...2.x):

Зробити це:

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

У Менші 1.4.0 у нас буде strictMathsопція, яка вимагає, щоб усі обчислення менше були в дужках, тому calcробота буде "поза коробкою". Це варіант, оскільки це суттєва переломна зміна. Ранні бета-версії 1.4.0 за замовчуванням включали цю опцію. Версія випуску за замовчуванням вимкнена.

— Люк Пейдж
джерело

2

Зауважте, що якщо ви менше компілюєте з поглибленням твіттера, він ігнорує цю програму . Принаймні на момент написання цього коментаря.

— Аттіла Фулоп

1

Я просто спробував calc(100% - 50px)у less.css 1.4.0 і результат був calc(50%). Дивовижний ~"..."трюк продовжує діяти, але мене бентежить вислів "поза коробкою", який змушує мене думати, що вищезазначене спрацює. Люк, як підтримується calcзміна в Менше 1.4.0? Дякую!

— Брайан М. Хант

2

Питання полягає в тому, чому менше.js намагався обчислити це в першу чергу? Він повинен нанести помилку на "100% - 250px", оскільки він не може обчислити розумну відповідь.

— 1313

72

Для майбутніх читачів ви можете також уникнути лише оператора, що дозволяє використовувати і змінні. Приклад:calc(@somePercent ~"-" @someLength)

— 0b10011

10

Замість того, щоб менше прорахувати це чи викинути помилку, чому він не може усвідомити, що користувач намагається зробити, і залишити це в спокої? Очевидно, що відсоток і значення пікселя не можуть бути обчислені разом меншими.

— dfmiller

37

Дуже поширеним випадком використання calc є ширина 100% і додавання певного поля навколо елемента.

Це можна зробити за допомогою:

@someMarginVariable = 15px;

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

— Себастьян Лорбер
джерело

-o-calc- ще не підтримується .

— ще

28

Існує декілька варіантів проходження з однаковим результатом:

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

— icl7126
джерело

9

Існує більш акуратний спосіб включити змінні всередину звільненого кальку, як пояснено в цьому дописі: функція CSS3 calc () не працює з Менше # 974

@variable: 2em;

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

Використовуючи фігурні дужки, вам не потрібно закривати та повторно відкривати прокладені лапки.

— brohr
джерело