×
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest