LESS es una pequeña herramienta sorprendente que amplía CSS con la adición de variables, combinaciones, operaciones y reglas anidadas. Lo que esto significa es que puedes escribir código leaner muy rápidamente. Y con el reciente aumento de las complejas propiedades de CSS3, tenemos algunos ejemplos evidentes de código que definitivamente podrían simplificarse un poco.
Hoy veremos cómo usar la implementación más reciente de JavaScript de LESS para simplificar el largo marcado de CSS3. Una de las características clave que veremos y que no he visto discutida en otros lugares es cómo tratar múltiples variables en los mixins. Es bastante simple, pero puede ser confuso si nunca lo has probado.
Cualquiera puede usar LESS.js
La primera vez que miré a MENOS, me pareció mucho trabajo. Hubo todos estos extraños pasos de compilación y scripts de Ruby que en última instancia sentían que iban a agregar tiempo a mi flujo de trabajo en lugar de reducirlo.
Afortunadamente, alguien se dio cuenta de que todo el proceso podría ser mucho más simple con JavaScript. ¡Así que ahora implementar LESS es tan fácil como pegar dos líneas de código en su HTML y todo se compila automáticamente en el navegador! Vamos a ver cómo funciona esto.
Empezando
Para asegurarse de que su código MENOS se compile correctamente, coloque el siguiente código en el encabezado de su código HTML.
Tenga en cuenta que el típico rel =? hoja de estilo? se ha convertido rel =? hoja de estilo / menos? y que hemos vinculado a una versión alojada en Google de LESS.js.
El siguiente paso es crear un archivo style.less. Puede nombrar lo que quiera, solo asegúrese de que tenga la extensión .less en lugar de .css como está acostumbrado.
Declarando variables
Por mucho, una de mis características favoritas de LESS es que puedes usar variables tal como lo harías en la mayoría de los lenguajes de programación principales. Esto hace que sea extremadamente fácil establecer estilos globales que pueden cambiarse en una sola ubicación en lugar de ordenar su código para encontrar cada instancia de ese estilo.
Para ver cómo se aplica esto en un nivel práctico, establezcamos un par de variables de color. Imagine que nuestra página web tendrá un color primario y uno secundario que se usa repetidamente en todo el diseño. En lugar de recordar el código de color cada vez, simplemente podemos establecer esto en variables.
Para establecer una variable en MENOS, use el símbolo @:
¡Eso es! Ahora, cuando queremos usar estos colores en nuestro diseño, simplemente usamos el mismo CSS que siempre usamos, pero insertamos el nombre de la variable en lugar del código de color.
Ahora, en cualquier momento en que cambiemos el color en la declaración de la variable, el cambio se aplicará automáticamente en el resto del código en cualquier lugar donde se llame la variable. Esto definitivamente te puede ahorrar mucho tiempo cuando comienzas a ajustar tus diseños.
Operaciones
Al igual que con JavaScript y cualquier otro lenguaje de programación al que esté acostumbrado, LESS le permite realizar operaciones en variables. Esto puede ahorrarle muchos cálculos mentales a largo plazo.
Como un ejemplo simplificado, digamos que querías crear una caja que fuera dos veces más ancha que alta. Podría declarar la altura en una variable y luego establecer otra variable que sea el doble de ese número.
Luego, más adelante en su código, usaría estas variables para establecer la altura y el ancho de su caja. Si fuera a volver y cambiar boxHeight a 400px, boxWidth se establecería automáticamente en 800px;
Mixins
Aquí es donde el CSS3 entrará en juego. Para comenzar, veamos la sintaxis básica de una propiedad aleatoria de CSS3, digamos border-radius.
Como puede ver, la forma actual de asegurarse de que esto funcione en la mayor cantidad de navegadores es incluir todas las distintas versiones específicas del navegador. Encima usamos radio del borde en conjunción con -webkit-border-radius y -moz-border-radio.
Siempre que queramos implementar esquinas redondeadas en nuestro CSS, tenemos que listar manualmente todas estas versiones. Veo que tu cerebro se desvanece y se forma una discusión sobre cómo podrías simplemente configurar estos estilos para una clase, pero ¿qué pasaría si quisieras la flexibilidad para ajustar el radio del borde por elemento? Configurar una clase CSS reutilizable es una buena solución, pero puede llevar esta idea mucho más lejos con MENOS.
LESS le permite esencialmente establecer múltiples variables en una sola clase que luego puede incrustarse en cualquier parte de su código. Para configurar una mezcla usando LESS, use la siguiente sintaxis:
El código anterior establece una variable para el radio y la hace igual a 12px, la arroja a todas las versiones de radio de borde, luego almacena toda esta información en una clase llamada .roundedCorners.
Ahora, cuando queremos aplicar esquinas redondeadas a un objeto, simplemente tiramos la clase.
Esto aplicará un radio de esquina de 12px a nuestra caja div usando todas las versiones propietarias apropiadas.
Recuerde que el radio de 12px que configuramos en la mezcla es simplemente un valor predeterminado que se pasa cuando no se especifican parámetros durante la llamada. Alternativamente, puede insertar esa clase y establecer rápidamente el radio del borde en un número diferente.
Este código todavía utiliza todas las diferentes versiones de radio de borde, pero automáticamente se pegará 20px como el valor para el radio. Esto hace que sea muy rápido para implementar iteraciones personalizadas de una propiedad CSS3. Vayamos más profundo por el agujero del conejo y veamos cómo hacerlo con propiedades más complicadas.
Mixins Múltiples Variables
El radio del borde fue un ejemplo simple porque solo contiene un único valor con el que trabajar, pero ¿qué pasa con las propiedades más complicadas como box-shadow?
Como puede ver arriba, aquí necesitamos configurar cuatro variables diferentes para que sean uniformes en las tres versiones. Puede parecer complicado, pero afortunadamente esto funciona básicamente igual que en JavaScript. Para mantener el ejemplo simple, solo usaremos la sombra de cuadro predeterminada para ver cómo se hace esto.
Aquí establecemos variables para las compensaciones horizontales y verticales, así como para el radio de desenfoque y el color de la sombra. Observe que estos valores están todos encerrados en un único conjunto de paréntesis y separados por comas. Luego, en el interior de los corchetes, lo escribimos con las variables tal como hicimos con los números de arriba, sin comas que separen los valores.
Así que digamos que queríamos aplicar esquinas redondeadas, un cuadro sombreado y una transición a un elemento utilizando MENOS y CSS. El código que usas sería similar al siguiente:
Entonces la implementación de estos sería similar al código a continuación.
Como puede ver, aplicamos las variables para la altura, el ancho y el color del cuadro, luego implementamos las clases roundedCorners y boxShadow Finalmente, creamos un evento flotante que hizo la transición del color de fondo del color primario al color secundario.
Reglas anidadas
El ejemplo anterior se puede simplificar aún más utilizando la función de reglas anidadas de LESS. Observe cómo podemos lanzar todos los estilos de caja en el mismo conjunto de soportes y eliminar la necesidad de escribir el ID de div en todo momento.
Como puede ver, todos los estilos de enlace del elemento del cuadro, los estilos de desplazamiento del enlace y los estilos de párrafo están contenidos dentro del mismo padre.
Compilando
Sé lo que estás pensando, todo esto está bien, pero ¿puedo realmente usarlo? ¿Se carga más lento que el CSS estándar? ¿Qué navegadores lo soportan?
Resulta que todas estas y otras preguntas similares realmente no importan. La idea detrás de LESS es acelerar y simplificar solo el paso del desarrollo. Esto significa que lo que se publica en tu sitio web final debe ser un CSS antiguo, no MENOS.
Una vez que haya terminado de trabajar en su sitio, solo necesita compilar el MENOR en CSS utilizando su navegador. Para hacer esto, simplemente abra su archivo HTML en un navegador y vea la fuente CSS. Lo que verá, independientemente de lo que haya codificado realmente, es una estructura CSS normal. Simplemente copie y pegue esto en un documento CSS y estará listo para comenzar.
Compilando con LESS.app
Para facilitar aún más las cosas, puede automatizar completamente el proceso de compilación utilizando la aplicación gratuita LESS.
Todo lo que tiene que hacer es arrastrar en la carpeta del proyecto que contiene sus archivos de MENOS? ¡Eso es! No hay paso dos. A medida que continúe ajustando y guardando sus archivos LESS, se generará automáticamente un nuevo archivo CSS.
Conclusión
Para resumir, LESS ahora se puede implementar con solo dos líneas de código en su HTML y puede cambiar drásticamente la forma en que escribe CSS. Pase unos meses con MENOS y estará creando y ajustando complejas hojas de estilo más rápido que nunca.
Puede usar MENOS para crear variables, realizar operaciones en variables, anidar reglas y crear combinaciones complicadas para simplificar su CSS3.
Deje un comentario a continuación y háganos saber lo que piensa de MENOS. ¿Crees que es una gran herramienta o una pérdida de tiempo? ¡Queremos saber!