×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Vytvárame riešenia

Ako v less správne zapísať funkciu calc() -CSS

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.


CSS,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.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších