Cum se convertesc CSS vechi la mai puțin
Am acoperit o mare parte din elementele de bază pentru LOCUL NOSTRU în postările noastre anterioare. Dacă ați urmat seria LESS, credem că în acest moment aveți deja o idee bună despre cum să utilizați variabile, Mixins și operație în LESS.
Am menționat, de asemenea, cum să convertim mai puțin în CSS obișnuit, cu o aplicație sau cu un compilator. Dar, cum facem contrariul; pentru a converti CSS în mai puțin? Ei bine, acest sfat este pentru tine.
Utilizând un instrument
Cu popularitate crescândă Preprocesor CSS, unele instrumente noi și aplicații care vizează, în esență, realizarea web-designerului sau a dezvoltatorului, cum ar fi acest instrument: CSS2Less.
Acest instrument ne permite să convertim CSS obișnuit în LESS. Deci, hai să încercăm. Am urmatoarele reguli CSS din dosarul meu vechi pentru a fi convertite.
nav height: 40px; lățime: 100%; fundal: # 000; border-bottom: 2px solid #fff; nav ul padding: 0; marja: 0 auto; nav li afișare: inline; plutește la stânga; nav a culoare: #fff; afișare: inline-block; lățime: 100px; text-shadow: 1px 1px 0px # 000; nav li a frontieră-dreapta: 1px solid #fff; box-dimensionare: de frontieră-box; nav li: ultim-copil a frontieră-dreapta: 0; nav: hover, nav: activ background-color: #fff;
Iată rezultatul.
nav: hover, nav: activ background-color: #fff; nav height: 40px; lățime: 100%; fundal: # 000; border-bottom: 2px solid #fff; a culoare: #fff; afișare: inline-block; lățime: 100px; text-shadow: 1px 1px 0px # 000; ul padding: 0; marja: 0 auto; li: ultimul copil a border-right: 0; li display: inline; plutește la stânga; o border-right: 1px solid #fff; box-dimensionare: de frontieră-box;
După cum vedem mai sus, vechiul nostru CSS este acum imbricat ca și în LESS.
Prescripţie
Cu toate acestea, putem vedea și câteva limitări în rezultatele conversiei. În vechiul CSS, avem mai multe culori identice, cum ar fi cele două declarații border-bottom: 2px solid #fff; și frontieră-dreapta: 1px solid #fff; avem ambele granițe în alb. În LESS, putem stoca această valoare constantă într-o Variabil.
De asemenea, nu cuibărește și nu separă * pseudo- cu un simbol ampersand (&), cum ar fi în regulile următoare Li: ultimul copil și navigați pe: hover, nav: activ. Acestea rămân așa cum sunt, unde putem simplifica de fapt setul de reguli în acest fel;
li &: primul-copil a &: hover &: activ
Concluzie
În ciuda limitărilor pe care le are încă în prezent, acest instrument poate ajuta destul de mult în economisirea timpului pentru cuiburi de seturi de reguli CSS. Trebuie doar să facem restul manual; posibil până la limitele de mai sus hotărât.
