Cómo convertir CSS viejo a MENOS
Hemos cubierto gran parte de los conceptos básicos de MENOS en nuestras publicaciones anteriores. Si ha estado siguiendo nuestra serie LESS, creemos que en este punto ya tiene una buena idea sobre cómo usar el Variables, Mixins y Operación en menos.
También hemos mencionado cómo convertir MENOS en CSS regular, con una aplicación o con un compilador. Pero, ¿cómo hacemos lo contrario? convertir CSS en MENOS? Bueno, este consejo es para ti..
Usando una herramienta
Con creciente popularidad de Preprocesador de CSS, algunas nuevas herramientas y aplicaciones que esencialmente apuntan a hacer la vida del diseñador o desarrollador web más fácil, como esta herramienta: CSS2Less.
Esta herramienta nos permite convertir CSS regular en MENOS. Entonces, vamos a intentarlo. Tengo las siguientes reglas CSS de mi archivo anterior para convertir.
nav altura: 40px; ancho: 100%; fondo: # 000; borde inferior: 2px sólido #fff; nav ul padding: 0; margen: 0 auto; nav li display: inline; flotador izquierdo; nav a color: #fff; pantalla: bloque en línea; ancho: 100px; text-shadow: 1px 1px 0px # 000; nav li a border-right: 1px solid #fff; tamaño de caja: caja de borde; nav li: last-child a border-right: 0; nav a: hover, nav a: active background-color: #fff;
Aquí está el resultado..
nav a: hover, nav a: active background-color: #fff; nav altura: 40px; ancho: 100%; fondo: # 000; borde inferior: 2px sólido #fff; a color: #fff; pantalla: bloque en línea; ancho: 100px; text-shadow: 1px 1px 0px # 000; ul relleno: 0; margen: 0 auto; li: último hijo a borde derecho: 0; li display: inline; flotador izquierdo; a border-right: 1px solid #fff; tamaño de caja: caja de borde;
Como podemos ver arriba, nuestro antiguo CSS ahora está anidado como en MENOS.
Limitación
Sin embargo también podemos ver algunas limitaciones en los resultados de la conversión. En el CSS antiguo, tenemos varios colores iguales, como en estas dos declaraciones. borde inferior: 2px sólido #fff; y borde derecho: 1px sólido #fff; Tenemos los dos bordes en blanco. En MENOS podemos almacenar este valor constante en una Variable.
Tampoco anida y separa la seudo-* con un símbolo "&" comercial (&), como en las siguientes reglas li: último hijo y nav a: hover, nav a: active. Simplemente permanecen como están, donde realmente podemos simplificar los conjuntos de reglas de esta manera;
li &: first-child a &: hover &: active
Conclusión
A pesar de las limitaciones que todavía tiene, esta herramienta puede ser muy útil para ahorrar tiempo para anidar conjuntos de reglas CSS. Solo necesitamos hacer el resto manualmente; posiblemente hasta que las limitaciones anteriores sean resuelto.
