Mniej agresywna kompilacja z CSS3 oblicz

336

The Less kompilatory że używam ( OrangeBits i bez kropki 1.3.0.5 ) są agresywnie tłumaczenia

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

w

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

Co oczywiście nie jest pożądane. Zastanawiam się, czy istnieje sposób, aby zasygnalizować kompilatorowi Less, aby w istocie zignorował atrybut podczas kompilacji. Przeszukałem dokumentację Less i dokumentację obu kompilatorów i nic nie znalazłem.

Czy kompilator Less or a Less to obsługuje?

Jeśli nie, to czy istnieje rozszerzenie CSS?

— Nick Babcock
źródło

9

Czy na pewno nie chcesz, aby kompilator był mniej agresywny?

— fiatjaf

Jestem też bardzo pewien, że chcę, aby kompilator był bardziej agresywny! (zdezorientowało mnie podwójne zaprzeczenie w poprzednim komentarzu;)) (więc głosowałem również na fajną funkcję poniżej)

— Andreas Dietrich

530

Mniej calcdomyślnie nie ocenia już wyrażenia wewnątrz v3.00.

Oryginalna odpowiedź ( Less v1.x...2.x):

Zrób to:

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

W Less 1.4.0 mamy strictMathsopcję, która wymaga, aby wszystkie Less Less były w nawiasach, więc calcbędą działać „od razu po wyjęciu z pudełka”. Jest to opcja, ponieważ jest to przełomowa zmiana. Wczesne wersje beta 1.4.0 domyślnie miały tę opcję. Wersja wydania ma domyślnie wyłączone.

— Luke Page
źródło

2

Zauważ, że jeśli kompilujesz mniej z przerwami Twittera, ignoruje to ucieczkę . Przynajmniej w momencie pisania tego komentarza.

— Attila Fulop

1

Właśnie próbowałem calc(100% - 50px)w less.css 1.4.0 i wynik był calc(50%). Ta niesamowita ~"..."sztuczka nadal działa, ale jestem zdezorientowany stwierdzeniem „out-of-the-box”, co sprawia, że myślę, że powyższe zadziałałoby. Łukasz, w jaki sposób obsługa calczmian w Less 1.4.0? Dzięki!

— Brian M. Hunt

2

Pytanie brzmi: dlaczego less.js próbowało to obliczyć? Powinien zgłosić błąd „100% - 250 pikseli”, ponieważ nie może obliczyć sensownej odpowiedzi.

— mpen

72

W przypadku przyszłych czytelników możesz także uciec tylko od operatora, umożliwiając również korzystanie ze zmiennych. Przykład:calc(@somePercent ~"-" @someLength)

— 0b10011,

10

Zamiast mniejszego błędnego obliczania tego lub zgłaszania błędu, dlaczego nie może zrozumieć, co użytkownik próbuje zrobić, i zostawić to w spokoju? Oczywiście wartości procentowej i pikselowej nie można obliczyć łącznie w mniejszym.

— dfmiller

37

Bardzo częstym przypadkiem użycia calc jest szerokość 100% i dodanie marginesu wokół elementu.

Można to zrobić za pomocą:

@someMarginVariable = 15px;

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

— Sebastien Lorber
źródło

-o-calc- nie jest jeszcze obsługiwany .

— kolejne

28

Istnieje kilka opcji zmiany znaczenia z tym samym wynikiem:

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

— icl7126
źródło

9

Istnieje prostszy sposób na dołączanie zmiennych do ucieczkowego obliczenia, jak wyjaśniono w tym poście: Funkcja obliczania CSS3 nie działa z Less # 974

@variable: 2em;

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

Używając nawiasów klamrowych, nie musisz zamykać i otwierać uciekających cudzysłowów.

— bracie
źródło