Jak przekonwertować stary CSS na mniejszy
W naszych poprzednich postach omówiliśmy wiele podstaw LESS. Jeśli śledzisz naszą serię LESS, wierzymy, że w tym momencie masz już dobry pomysł na temat korzystania z Zmienne, Mieszanki i Operacja w mniej.
Wspomnieliśmy również, jak konwertować LESS na zwykły CSS, za pomocą aplikacji lub kompilatora. Ale jak zrobić odwrotnie; przekształcić CSS w LESS? Cóż, ta wskazówka jest dla ciebie.
Korzystanie z narzędzia
Z rosnącą popularnością Preprocesor CSS, kilka nowych narzędzi i aplikacji, których celem jest ułatwienie życia projektanta stron internetowych lub programistów, takich jak to narzędzie: CSS2Less.
To narzędzie pozwala nam konwertować zwykłe CSS na LESS. Więc spróbujmy. Mam przekonwertowane następujące reguły CSS z mojego starego pliku.
nav height: 40px; szerokość: 100%; tło: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; margin: 0 auto; nav li display: inline; float: left; nav a color: #fff; wyświetlacz: blok śródliniowy; szerokość: 100px; text-shadow: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; wielkość pudełka: obramowanie; nav li: last-child a border-right: 0; nav a: hover, nav a: active background-color: #fff;
Oto wynik.
nav a: hover, nav a: active background-color: #fff; nav height: 40px; szerokość: 100%; tło: # 000; border-bottom: 2px solid #fff; a color: #fff; wyświetlacz: blok śródliniowy; szerokość: 100px; text-shadow: 1px 1px 0px # 000; ul padding: 0; margin: 0 auto; li: last-child a border-right: 0; li display: inline; float: left; a border-right: 1px solid #fff; wielkość pudełka: obramowanie;
Jak widać powyżej, nasz stary CSS jest teraz zagnieżdżony jak w LESS.
Ograniczenie
Jednak możemy również zobaczyć pewne ograniczenia w wynikach konwersji. W starym CSS mamy kilka takich samych kolorów, takich jak te dwie deklaracje border-bottom: 2px solid #fff; i border-right: 1px solid #fff; mamy obie krawędzie w kolorze białym. W LESS możemy faktycznie zapisać tę stałą wartość w a Zmienna.
Nie zagnieżdża się i nie oddziela rzekomy-* z symbolem ampersand (&), takim jak w poniższych zasadach li: ostatnie dziecko i nav a: hover, nav a: active. Po prostu pozostają takie, jakie są, w których możemy w ten sposób uprościć zestawy reguł;
li &: first-child a &: hover &: active
Wniosek
Pomimo ograniczeń, które wciąż istnieją, narzędzie to może być bardzo pomocne w oszczędzaniu czasu na zagnieżdżanie zestawów reguł CSS. Resztę musimy wykonać tylko ręcznie; być może do czasu, gdy powyższe ograniczenia będą zdecydowany.
