Как да конвертирате стари CSS да по-малко

Разгледахме голяма част от основните положения за по-малките в предишните ни постове. Ако сте следвали поредицата ни от LESS, смятаме, че на този етап вече имате добра представа за това как да използвате Променливи, Mixins и операция по-малко.

Ние също споменахме как да преобразуваме LESS в обикновен CSS, с приложение или с компилатор. Но как да направим обратното; да конвертирате CSS в LESS? Е, този съвет е за вас.

Използване на инструмент

С нарастващата популярност на CSS препроцесор, някои нови инструменти и приложения, които по същество целят да улеснят живота на уеб дизайнера или разработчика, като този инструмент: CSS2Less.

Този инструмент ни позволява да конвертираме регулярните CSS в LESS. Така че нека опитаме. Имам следните CSS правила от стария ми файл, който трябва да се преобразува.

 nav височина: 40px; ширина: 100%; фон: # 000; граница отдолу: 2px твърдо #fff;  nav ul padding: 0; марж: 0 авто;  nu li display: inline; поплавък: наляво;  Nav a цвят: #fff; дисплей: вграден блок; ширина: 100px; текстова сянка: 1px 1px 0px # 000;  навик a border-right: 1px solid #fff; кутия оразмеряване граница кутия;  nav ли: последно дете на border-right: 0;  nav a: hover, nav a: активен фонов цвят: #fff;  

Това е резултатът.

 nav a: hover, nav a: активен фонов цвят: #fff;  Nav височина: 40px; ширина: 100%; фон: # 000; граница отдолу: 2px твърдо #fff; a цвят: #fff; дисплей: вграден блок; ширина: 100px; текстова сянка: 1px 1px 0px # 000;  ul padding: 0; марж: 0 авто;  li: последно дете a border-right: 0;  li дисплей: inline; поплавък: наляво; a border-right: 1px solid #fff; кутия оразмеряване граница кутия;  

Както можем да видим по-горе, нашият стар CSS вече е вложен като LESS.

ограничаване

Но също така можем да видим някои ограничения в резултатите от преобразуването. В стария CSS имаме няколко еднакви цвята, като в тези две декларации граница отдолу: 2px твърдо #fff; и border-right: 1px solid #fff; имаме и двете граници в бяло. В LESS можем да запазим тази постоянна стойност в a променлив.

Също така не гнездят и не разделят псевдо- * със символ (&), както е в следните правила Ли: последната дете и nav a: hover, nav a: активен. Те просто остават такива, каквито са, където всъщност можем да опростим правилата по този начин;

 li &: първо дете  a &: hover  &: активно  

заключение

Въпреки ограниченията, които понастоящем все още има, този инструмент може да помогне за спестяването на нашето време за влагане на CSS набори от правила. Остава ни само ръчно; вероятно до горепосочените ограничения разрешен.