LESS es un preprocesador CSS amigable y de fácil acceso. Aunque en última instancia, Sass y Stylus son más potentes y robustos, LESS tiene un cierto encanto que lo mantiene como precursor en la batalla de los preprocesadores.
Si eres un fanático de Sass, entonces puedes aprovechar Compass, un marco increíble que hace que la codificación con propiedades CSS3 complejas sea muy fácil. Pero ¿qué pasa con los usuarios de LESS? ¿Dónde está su brújula? Hoy veremos tres bibliotecas de mezcla impresionantes que ayudarán a llenar ese vacío.
¿Cuál es el trato con MENOS?
Si usted es uno de los codificadores de CSS que aún se encuentran en el exterior, si observa los preprocesadores de CSS pero no sabe si tiene la habilidad suficiente para usar uno, LESS es un excelente lugar para comenzar.
Lo primero que hay que tener en cuenta es que los preprocesadores realmente hacen la codificación más fácil, aunque parezcan una gran complicación al principio. Para comenzar, visite el sitio web de LESS y descargue less.js.
Ahora cree una hoja de estilo .less (como una hoja de estilo .css, solo con una extensión diferente) y colóquela en su HTML como cualquier otra hoja de estilo. También asegúrese de colocar el archivo JavaScript.
"El archivo JavaScript automáticamente se encargará de convertir su código MENOS en CSS que el navegador pueda leer".¡Eso es! Eso fue indoloro, ¿verdad? Ahora continúe y escriba CSS como siempre lo haría en ese archivo .less, y gradualmente comience a jugar con impresionantes funciones de MENOS como variables y combinaciones. El archivo JavaScript automáticamente se encargará de convertir su código MENOS en CSS que el navegador pueda leer.
Ahora, lo que hay que recordar es que el archivo less.js es para propósitos de prueba. Cuando esté listo para tomar realmente este chupón en vivo, coloque su archivo .less en Less.app o algún equivalente y escupirá un archivo CSS viejo y simple. Ese archivo de vainilla CSS es lo que deberías usar en tu borrador final.
Sin embargo, mantén tus archivos LESS cerca, a medida que los actualices, Less.app también actualizará tu archivo CSS. Realmente es un flujo de trabajo muy simple. Dale una oportunidad, es mucho más fácil de lo que crees.
¿Qué pasa con Sass?
Si eres un usuario de Sass, felicidades, yo también lo soy. Sin embargo, esta publicación no pretende ser un debate entre MENOS y Sass, así que solo dése una palmadita en la espalda y muévase en lugar de dejarme toneladas de comentarios en contra de MENOS.
MENOS Mixins
Una de las mejores características de cualquier preprocesador CSS es la capacidad de crear mixins, que te permiten unir un montón de propiedades y valores personalizables en un pequeño paquete.
Aquí hay un ejemplo:
Esto toma todo el código box-shadow y lo envuelve muy bien en una sola mezcla que se puede implementar con valores personalizados (o los valores predeterminados que usamos anteriormente). Ahora, en lugar de escribir una gran cantidad de código cada vez que desee un cuadro de sombra, esto es todo lo que necesita:
Bastante impresionante verdad? Cuando se compile este código, se escupirá como CSS antiguo. Obtienes una base de código mucho más legible y fácilmente actualizable sin sacrificar la compatibilidad del navegador.
Ahorre tiempo con las bibliotecas mixtas
Como puede imaginar, hay un montón de posibles combinaciones que casi todos los codificadores CSS podrían beneficiarse de su uso. CSS3 está plagado de código abultado, redundante y lleno de prefijos que es un dolor de escribir. Unos cuantos mixins prefabricados para todas estas tonterías podrían ayudarlo a ahorrar un montón de tiempo y problemas al crear sitios web.
"CSS3 está cargado de código inflado, redundante y lleno de prefijos que es un verdadero dolor de escritura".Afortunadamente, hay muchas personas en la comunidad de desarrollo web que han trabajado en este proyecto. Como mencioné en la introducción, Compass es el recurso definitivo para los usuarios de Sass, pero el hecho de que no haya una versión de Compass para LESS no significa que deba perderse. Hay algunas bibliotecas de mezcla LESS realmente geniales por ahí, simplemente esperando que te subas a bordo. Echemos un vistazo a unos pocos.
MENOS Elementos
LESS Elements fue una de las primeras bibliotecas de mezcla LESS sólidas que encontré. En verdad, es bastante básico, pero es un lugar decente para comenzar:
Mixins incluidos
LESS Elements viene con quince mixins precompilados (de nuevo, muy básicos). Esto es lo que está incluido:
- .gradiente
- .bw-gradiente
- Vencido
- .drop-shadow
- .redondeado
- radio del borde
- .opacidad
- .duración de la transición
- .rotación
- .escala
- .transición
- .sombra interior
- .sombra de la caja
- .columnas
- .traducir
Como puede ver, muchas de sus complejidades estándar de CSS3 están cubiertas aquí: gradientes, sombras, incluso transiciones.
Sintaxis
La sintaxis aquí es bastante simple, todos siguen prácticamente las convenciones de las propiedades CSS normales. Al igual que con todos los mixins LESS, se implementan a través de la sintaxis de período, por lo que parece y se siente como si estuviera anidando una clase dentro de una clase.
Crítica
LESS Elements fue un gran proyecto que tenía un gran potencial, pero nunca se dio cuenta de ese potencial. Si, como yo, de hecho estás acostumbrado a la increíble combinación de Sass y Compass, LESS Elements se siente pequeño en comparación. Hay tanto que no es Aquí es difícil entusiasmarse con lo que es.
? Hay tanto que no es Aquí es difícil emocionarse con lo que es.Dicho esto, hay muchos programadores que prefieren la simplicidad y que realmente no necesitan la pelusa adicional, por lo que esto todavía podría atraer a esa multitud.
Más allá del hecho de que LESS Elements es tan básico es la desafortunada verdad que, por lo que puedo decir, no se ha tocado en un año. Dado que CSS aún está evolucionando a medida que se implementan nuevas funciones y las funciones más antiguas finalmente alcanzan el estado de varios navegadores, existe un gran peligro al basar su flujo de trabajo en una herramienta que está estancada.
En última instancia, hubo un gran trabajo aquí, pero creo que podemos hacerlo mejor.
MENOS sombrero
La increíble gente que nos trajo CSS Hat acaba de lanzar LESS Hat, una increíble y moderna biblioteca LESS mixin. Después de mirar a su alrededor, no pudieron encontrar una fuente decente para LESS mixins, ¡así que hicieron la suya propia!
Mixins incluidos
Hay diecinueve mixins incluidos con LESS Hat, con fotogramas clave (el vigésimo) en el camino. Como puede ver, cubre casi todo lo que vimos en LESS Elements y más:
- .animación
- .keyframes (próximamente)
- .apariencia
- .backface-visibilidad
- .background-clip
- .background-origin
- tamaño de fondo
- radio del borde
- .border-imagen
- .sombra de la caja
- tamaño de la caja
- .columnas
- .Perfil delantero
- .gradiente
- .opacidad
- .perspectiva
- .tamaño
- .transformar
- .transición
- .user-select
De hecho, están tan orgullosos de su conjunto de funciones que no tienen miedo de compararlo con LESS Elements e incluso Compass.
Como se puede ver, LESS Hat es prácticamente las rodillas de las abejas. Los puntos fuertes que le encantarán incluyen la capacidad de implementar gradientes múltiples sin preocuparse por la sintaxis más antigua, las sombras de cuadros ilimitadas, las transformaciones 3D e incluso la compatibilidad con @ font-face.
Sintaxis
La sintaxis de LESS Hat es en realidad un poco peculiar. Notará esto en particular en cualquier propiedad en la que pueda implementar múltiples instancias de una propiedad, como con múltiples casilleros.
Como puede ver, tiene citas y el símbolo ~ para tratar, además de la sintaxis entre paréntesis típica. ¿Que está pasando aqui?
La respuesta es bastante complicada. Se reduce al hecho de que LESS en sí no funciona tan bien con la sintaxis para incluir múltiples instancias de propiedades. Para lidiar con esto, toman la entrada como una cadena escapada y luego la analizan dentro de cada mezcla. Puedes leer más sobre esto aquí.
Crítica
LESS Hat representa uno de los mejores recursos LESS de terceros que he visto hasta la fecha. Se ha realizado un gran esfuerzo y el resultado es realmente algo maravilloso. Si los chicos de CSS Hat se mantienen al tanto, esto podría convertirse en una herramienta imprescindible para los usuarios de LESS.
Las críticas aquí ya han sido ampliamente abordadas. Sería bueno ver el soporte de fotogramas clave, pero se supone que llegará pronto, por lo que no será un problema a largo plazo. La sintaxis reduce la naturaleza fácil de usar de MENOS, pero parece ser un mal necesario si desea el tipo de conjunto de características que ofrece MENOS Sombreros.
Twitter Bootstrap y Preboot
Twitter Bootstrap es un marco front-end muy popular que nace del increíble trabajo del desarrollador de Twitter Mark Otto. En su esencia, Bootstrap se construye y mantiene sobre una base MENOS, no CSS puro.
Dado que Bootstrap es un conjunto de herramientas tan increíble e increíblemente vasto, esto lo convierte en una de las colecciones más impresionantes de recursos LESS jamás creados.
¿Qué pasa con el preboot?
Históricamente, Mark Otto trabajó en un proyecto llamado Preboot.less, que era una colección de LESS mixins. Este proyecto ha evolucionado y se ha incorporado a Bootstrap, así que mire allí (Mark me confirmó que Preboot ahora es un proyecto estancado).
Bootstrap & LESS
¿Quieres archivos LESS? Los tienes Bootstrap actualmente viene con la friolera de cuarenta archivos .less, que controlan todos sus diversos aspectos y características.
"Si estás buscando algo que esté realmente a la par con la profundidad y amplitud de Compass, Bootstrap es tu respuesta". Si estamos comparando estrictamente con las dos bibliotecas anteriores que usamos antes, entonces querremos echar un vistazo al archivo mixins.less. Aquí encontrará mixins para gradientes, opacidad, sombras, clear-fix, el sistema de cuadrícula y mucho más. Si está buscando algo que esté realmente a la par con la profundidad y amplitud de Compass, Bootstrap es su respuesta.
Crítica
Como pueden ver en mis publicaciones anteriores, soy un gran fanático de Bootstrap. Es un recurso realmente sólido y una excelente manera para que Twitter contribuya a la comunidad de desarrolladores.
"Todos estos grandes mixins están incluidos en Bootstrap, pero por lo que puedo decir, realmente no aparecen en la documentación actual".Mi principal problema aquí es que todos estos grandes mixins están incluidos en Bootstrap, pero por lo que puedo decir, realmente no aparecen en la documentación actual. Si lo hacen, seguro que no puedo encontrarlos, lo que sigue siendo una queja importante.
Otros recursos, como LESS Hat, LESS Elements y Compass, enumeran claramente los mixins incluidos con ejemplos de sintaxis, código de implementación y resultado final. Necesitamos algo como esto para los mixins de Bootstrap. Quizás realmente solo están destinados a los elementos de la interfaz de usuario de Bootstrap, pero ¿dónde está la diversión?
¿Cual es el mejor?
Creo que es bastante obvio que LESS Hat y Bootstrap se quitan los pantalones de LESS Elements, pero entre los dos, ¿cuál es el mejor? La respuesta por supuesto, depende de lo que necesites.
Bootstrap no es una lista de mixins, es un marco enorme con una tonelada de recursos.Si solo está buscando un puñado de mixins, siempre puede descargar Bootstrap y tomar el archivo mixins.less, pero incluso eso puede ser un poco pesado para sus necesidades.
Por el contrario, LESS Hat tiene una huella mucho más pequeña y no busca ser un marco extenso. Tiene los MENOS mixins que necesitas y nada más.
En pocas palabras, si está buscando redefinir y sistematizar completamente la forma en que construye sitios web, visite Bootstrap. Sin embargo, si solo eres un MENOR usuario que busca algunos mixins, definitivamente recomiendo revisar LESS Hat.
Si eres MENOR usuario, ¿usas alguna biblioteca mixin? Háganos saber en los comentarios.