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?

css compilation less css-calc 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

Odpowiedzi:

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