¿Hay alguna herramienta que convierta css a less.css?

21

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?

js-codificador
fuente
mira mis ediciones abajo.
fatnjazzy
Debería verificar la respuesta de @Simone Carletti y tal vez ampliar un poco lo que realmente está preguntando. Es posible que no se necesite una "conversión" real, más allá de cambiar el nombre de su archivo.
Su '
Interesante, pero me pregunto si vale la pena agregar 33 KB de código JS (less.js) para reducir el tamaño de los archivos CSS.
Marco Demaio
1
No estoy usando el compilador JavaScipt obviamente. Y el tamaño del CSS no es la razón por la que lo uso. La mantenibilidad es la razón. :)
js-coder

Respuestas:

17

En realidad encontré algo ahora: http://leafo.net/lessphp/lessify/

Realiza un formateo básico, por ejemplo:

#header {
/* ... */
}

#header p {
/* ... */
}

a

#header {
/* ... */
p {
/* ... */
}
}
js-codificador
fuente
15

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.

Simone Carletti
fuente
Esto trae un muy buen punto. Las respuestas hasta ahora parecen centrarse en la parte de "convertir" de la pregunta, hacer mixins, etc. y no solo si el archivo actual se puede usar en un cambio a MENOS flujo de trabajo.
Su '
6

¿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:

http://toki-woki.net/p/least/

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):

  1. Si está trabajando con varios archivos CSS aditivos, combínelos en un solo archivo CSS. Esto asegura que todo esté MENOS y optimizado juntos.

  2. 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.

  3. 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.

  4. Pega el archivo CSS resultante en Menos y mira a la bestia.

  5. Reintroduzca sus reinicios y @screen.

  6. 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.

Joel Rodgers
fuente
¿Esos convertidores no entienden @import? Pensé que LESS podía analizar @importdeclaraciones 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.
Lèse majesté
Lo hacen, pero tenga en cuenta que estas herramientas existen en línea, por lo que debe cortarlas y pegarlas en un campo de texto para que no tenga acceso a sus hojas de estilo externas.
Joel Rodgers
Ah, en realidad no hice clic en los enlaces. Asumí que eran herramientas de escritorio. Eso tiene sentido entonces.
Lèse majesté
5

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.

Jason Gennaro
fuente
Convenido. Aquí se requiere una cierta cantidad de inferencia y conocimiento de su intención para las que las computadoras simplemente no son muy adecuadas. Podrá automatizar algunas tareas (vea el enlace de @dotweb) y tal vez consolidar cosas como los valores de color en una sola variable, pero eso es probablemente todo.
Su '
Sí, pero la conversión de MENOS a CSS es una conversión de 1 a 1, por lo que teóricamente existe algún algoritmo que puede crear un código MENOS optimizado de CSS ... Alguien solo necesita escribirlo.
trusktr
Los mixins pueden ir en cualquier dirección, ya que es fácil para la computadora recolectar y agrupar selectores y anidarlos. Afortunadamente, esta es la parte más tediosa de la conversión y es computable (vea mi respuesta). De todos modos, dada la naturaleza en cascada de CSS, puede renderizarse de manera diferente al CSS original. Las variables y las expresiones son imposibles. Las computadoras no pueden determinar la intención o la semántica. ¿Cómo puede una computadora calcular ese ancho: 400 en CSS es en realidad ancho: ancho de página / 2 en MENOS? Sería posible que un convertidor convierta colores y fuentes en variables.
Joel Rodgers
@JoelRodgers, ¿por qué la naturaleza en cascada de CSS implica que los "descompiladores" tendrán errores? (Obviamente, un descompilador puede tener errores, pero en principio no es difícil saber si una reordenación de los términos cambiará la semántica).
Peter Taylor
Estoy hablando de declaraciones de clase y atributos. Debe declararlos en el mismo orden exacto, de lo contrario tendrá resultados diferentes. Mal error, quise decir Reglas anidadas en lugar de mixins.
Joel Rodgers
3

¿Qué tal buscar y reemplazar?

si tienes color:#ffffffy quieres cambiarlo a@color

solo busca color:#ffffffo color : #ffffffreemplaza 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.

fatnjazzy
fuente
Sí, ya pensé en eso. Pero es un archivo bastante grande, así que quiero asegurarme, esta será la forma más fácil. ;) Piensa en mixins, etc.
o puede escribir un script PHP realmente simple que lo maneje.
fatnjazzy
1
No podrá encontrar una herramienta que convierta de manera confiable CSS puro para usar MENOS mixins.
Alex
Tienes razón. Las variables automáticas y la mezcla no tienen sentido.
0

Pruebe este sitio: css2less.cc

Convierte tu CSS a MENOS mientras escribes.

Diseñador web
fuente