Nedávno pri práci s less a funkciou calc() som zažil situáciu, kedy sa mi strácal celý kontajner a nevedel som prečo. Najskôr som si myslel, že premiestnením *.css súborov do less a ich premenovaním, boli dáke nepodporované znaky v minifikovanej verzii jedného *.css súboru, a tak sa mi zle spracovávalo css. Nakoniec sa ukázalo, že problém bol niekde úplne inde.Po analýze problému som zistil, že inkriminovaný kontajner má úplné iné odsadenie ako som mu definoval a preto som ho nemal v layoute. Nakoniec som zistil, že CSS funkcia calc() je kompilátorom prekladaná inak, ako sa očakáva.Príklad: Zápis v less.
1
margin-top: calc(50% - 200px);
Príklad: Zápis v CSS po kompilácii less, ktorý je nesprávne.
1
margin-top: calc(-150%);
Pri hľadaní riešení tohto neštandardného problému som zistil, že zápis argumentu funkcie calc() sa v less musí spraviť inak. Príklad: Podporovaný zápis argumentu, ktorý kompilátor spracuje správne.
1
margin-top: calc(~"50% - 200px");
Záver
Na internete boli aj iné riešenia, ktoré som už ale neskúšal. Ak máte ďalšie tipy, ako sa má zapisovať calc(), podeľte sa o ne prostredníctvom komentára. 24.2.2018, Matej LednárKategória: CSSCSS,less,calc(),margin,margin-top,compile,programming,html,web,web page,layout,code,compilerŽiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.Viac informácií nájdete v sekcii O projekte.
