Tengo un archivo CSS bastante grande, que quiero convertir a menos. Cuando escribí el CSS no sabía less.css, pero ahora todavía quiero usar mi CSS anterior.
¿Existe alguna herramienta que pueda ayudarme a convertirlo automáticamente?
Tengo un archivo CSS bastante grande, que quiero convertir a menos. Cuando escribí el CSS no sabía less.css, pero ahora todavía quiero usar mi CSS anterior.
¿Existe alguna herramienta que pueda ayudarme a convertirlo automáticamente?
Respuestas:
En realidad encontré algo ahora: http://leafo.net/lessphp/lessify/
Realiza un formateo básico, por ejemplo:
#header {
/* ... */
}
#header p {
/* ... */
}
a
#header {
/* ... */
p {
/* ... */
}
}
En realidad, no necesita ninguna herramienta de conversión para comenzar a trabajar con MENOS. MENOS la sintaxis es retrocompatible con CSS . Significa que cualquier archivo CSS también es un archivo MENOS válido.
Simplemente obtenga su CSS y cámbiele el nombre a MENOS archivo. Luego use MENOS características específicas junto con sus cambios. Cuanto más actualice el archivo, más podrá usar MENOS características.
Hice lo mismo para SCSS y un proyecto muy grande con 10 archivos CSS. Era casi imposible (y una gran pérdida de tiempo) reescribir todo CSS con SCSS. Simplemente lo renombré, luego, cada vez que estaba trabajando en el archivo CSS, ejecutaba una pequeña refactorización en el código para aprovechar mixins, variables, etc.
¿Has mirado al menos? Es mucho mejor para convertir CSS que Lessify. En particular, Lessify no optimiza tus clases muy bien. Copió los restablecimientos del navegador a todos sus mixins generados, creando atributos redundantes. Está claro que todavía está en la etapa experimental. Ninguna de las utilidades puede determinar la semántica, por lo que no pueden convertir valores en expresiones, vars o mixins paramétricos.
Menos hace un mejor trabajo de optimización y parece ser más funcional. Incluso maneja pseudoclases para usted:
Estas herramientas son ideales para trabajar con grandes archivos CSS preexistentes. Estos son los pasos que recomiendo para convertir CSS a MENOS (asegúrese de guardar una copia de los archivos CSS originales):
Si está trabajando con varios archivos CSS aditivos, combínelos en un solo archivo CSS. Esto asegura que todo esté MENOS y optimizado juntos.
Ejecute el código CSS resultante a través de una utilidad de limpieza CSS en línea. He tenido buenos resultados con cleancss: http://www.cleancss.com/ . Esto eliminará cualquier marcado extraño y redundante que no pueda ser atrapado por un convertidor MENOS.
Elimine @Media y cualquier restablecimiento de estilo que tenga en el archivo CSS. Pueden crear problemas o introducir posibles redundancias. Probablemente sea una buena idea mantener los restablecimientos en un archivo separado.
Pega el archivo CSS resultante en Menos y mira a la bestia.
Reintroduzca sus reinicios y @screen.
Ahora que ha terminado, revise cada uno de los atributos y encuentre buenos candidatos para la refactorización y conviértalos en MENOS variables y expresiones. El color CSS y los atributos de fuente son los más fáciles de factorizar, la búsqueda global simple y el reemplazo funcionan bien. Al final, puede decidir si desea dividir el archivo único en archivos lógicos más pequeños. Puede encontrar que el proceso hace que reorganice sus archivos de una manera diferente.
No soy el autor de Least, solo alguien que busca una herramienta similar y decidió contarle al mundo sobre ello.
@import
? Pensé que LESS podía analizar @import
declaraciones y consolidar todas sus hojas de estilo en un solo CSS cuando se compilan sus archivos LESS. Parece que volcar todo su CSS perfectamente organizado en una sola hoja de estilo gigante para convertirlo a MENOS sería un paso atrás para la mantenibilidad.
No creo que un convertidor pueda saber qué quiere hacer con gran parte del código.
Por ejemplo, no necesariamente sabría qué variables desea utilizar. O cómo generar mixins o funciones.
Creo que con este deberás hacerlo manualmente.
¿Qué tal buscar y reemplazar?
si tienes color:#ffffff
y quieres cambiarlo a@color
solo busca color:#ffffff
o color : #ffffff
reemplaza con @color
.
Por lo general, no confío en estas herramientas.
o puede escribir un script PHP realmente simple que lo maneje.
Actualización 1 :
O puede usar la http://nex-3.com/posts/96-scss-sass-is-a-css-extension que es similar a less y tiene una herramienta de conversión.
Pruebe este sitio: css2less.cc
Convierte tu CSS a MENOS mientras escribes.