Mniej agresywna kompilacja z CSS3 calc

Mniej kompilatorów, których używam (OrangeBits i dotless 1.3.0.5) są agresywnie tłumaczone 

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

Do 

body { width: calc(-151.5%); }
Co oczywiście nie jest pożądane. Zastanawiam się, czy jest sposób, aby zasygnalizować kompilatorowi Less, aby zasadniczo zignorował atrybut podczas kompilacji. Przeszukałem dokumentację Less i dokumentację obu kompilatorów i nie mogłem nic znaleźć.

Czy less czy less compiler to obsługuje?

Jeśli nie, czy istnieje przedłużacz CSS, który tak robi?

Author: dippas, 2012-08-15
Source

4 answers

Less domyślnie nie oblicza wyrażenia wewnątrz calc, Ponieważ v3.00.

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

Zrób to: 

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

W Less 1.4.0 będziemy mieli opcję strictMaths, która wymaga, aby wszystkie obliczenia Less znajdowały się w nawiasach, więc calc będzie działać "out-of-the-box". Jest to opcja, ponieważ jest to poważna zmiana przełomowa. We wczesnych wersjach beta 1.4.0 opcja ta była domyślnie włączona. Wersja release domyślnie wyłączona.

 484
Author: Luke Page,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-27 01:48:46

Bardzo powszechnym zastosowaniem calc jest przyjmowanie 100% szerokości i dodawanie 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);
 34
Author: Sebastien Lorber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-08 08:11:23

Istnieje kilka opcji ucieczki 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); }
 25
Author: icl7126,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-20 10:41:28

Wiem, że to jest stare, ale jest bardziej uporządkowany sposób, aby włączyć zmienne wewnątrz escaped calc, jak wyjaśniono w tym poście: https://github.com/less/less.js/issues/974 

@variable: 2em;

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

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

 6
Author: brohr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-08 20:02:41