Cómo utilizar funciones con menos CSS

Las funciones simplifican significativamente su experiencia de programación, y esto también se aplica cuando escribe código CSS.

Less CSS es un preprocesador de CSS robusto y dinámico que ha atraído mucha atención y popularidad en los últimos años. Como preprocesador, sirve como una extensión de "Vanilla CSS", el lenguaje de estilo CSS tradicional utilizado en el desarrollo web, al proporcionar una variedad de características y funcionalidades adicionales que mejoran la experiencia de estilo general.

Si está bien versado en la escritura de CSS estándar, puede realizar la transición sin problemas al uso de Less CSS sin una curva de aprendizaje pronunciada. Esta compatibilidad facilita el mantenimiento de sus conocimientos de CSS existentes mientras aprovecha las capacidades avanzadas de Less.

En programación, una función es un bloque de código que realiza una tarea específica. También puedes reutilizarlo en otro lugar del programa. Las funciones normalmente toman datos, los procesan y devuelven los resultados.

Facilitan la reducción del código duplicado dentro de un programa. Por ejemplo, digamos que tienes un programa que calcula el descuento en función del precio que ingresa el usuario. En un lenguaje como JavaScript, podrías implementarlo así:

Luego puedes llamar a la función y pasar elprecioy ellímite.

Al abstraer la lógica para verificar los descuentos, el programa no solo es legible, sino que ahora tiene un bloque de código reutilizable que procesa el descuento y devuelve el resultado. Las funciones pueden hacer mucho más, pero esto es sólo lo básico.

En CSS tradicional, hay un conjunto muy limitado de funciones disponibles para usted como desarrollador. Una de las funciones más populares en CSS es calc()Función matemática que hace exactamente lo que parece: realiza cálculos y utiliza el resultado como un valor de propiedad en CSS.

En Less CSS, hay varias funciones que hacen más que solo operaciones aritméticas. Una función que puede encontrar en Less es lasi función. Elsi La función toma tres parámetros: una condición y dos valores. El siguiente bloque de código muestra cómo puede utilizar esta función:

En el bloque de código anterior, el compilador Less comprueba si la variableancho(definido por el@símbolo) es mayor que la variablealtura . Si la condición es verdadera, la función devuelve el primer valor después de la condición (10px). De lo contrario, la función devuelve el segundo valor (20px).

Después de la compilación, la salida CSS debería verse así:

Un booleano es una variable que tiene dos valores posibles:verdaderooFALSO . Con elbooleano() función en Less, puede almacenar el valor verdadero o falso de una expresión en una variable para su uso posterior. Así es como funciona.

En el bloque de código anterior, el compilador Less comprueba sicolor de texto es rojo. Entonces elcolor-bgLa variable almacena el valor.

El bloque de código anterior se compila en algo como esto:

La sintaxis para elreemplazar()La función se ve así:

cadenarepresenta la cadena en la que desea buscar y reemplazar.patrónes la cadena a buscar.patrón También puede ser una expresión regular, pero normalmente es una cadena. Después de una coincidencia exitosa, el compilador Less CSS lo reemplazapatróncon elreemplazo.

Opcionalmente, elreemplazar()La función también puede contener labanderasparámetro para indicadores de expresión regular.

El bloque de código anterior debería dar como resultado lo siguiente después de la compilación:

En Less CSS, usas comas o espacios para definir una lista de valores. Por ejemplo:

Puedes usar ellongitud()Función para evaluar el número de elementos de la lista.

También puedes utilizar elextracto() función para extraer el valor en una posición particular. Por ejemplo, si desea obtener el tercer elemento en elcomestibleslista, haga lo siguiente:

A diferencia de los lenguajes de programación habituales donde el índice de la lista comienza desde 0, el índice inicial de una lista en Less CSS es siempre 1.

Otra función de lista que podría resultar útil al crear sitios web con Less es larango() función. Se necesitan tres parámetros. El primer parámetro especifica la posición inicial en el rango. El segundo parámetro indica la posición final y el último parámetro especifica el valor de incremento o disminución entre cada elemento del rango. Si no se proporciona, el valor predeterminado es 1.

El bloque de código anterior debería compilarse a lo siguiente:

Como puede ver, el compilador Less CSS comienza desde 10px, aumentando el valor anterior en 10, hasta llegar a la posición final (40px).

Es hora de reunir todo lo que has aprendido y crear un proyecto simple con menos CSS. Crea una carpeta y agregaíndice.htmyestilo.menosarchivos.

Abre elíndice.htmarchivo y agregue el siguiente código HTML.

En el bloque de código anterior, hay un padre"envase"divcon un vacíoh1 elemento. Elsrcatributo en elguionLa etiqueta apunta a la ruta al compilador Less CSS.

Sin estoguion etiqueta, el navegador no podrá entender su código. Alternativamente, puede instalar Less CSS en su computadora a través de Node Package Manager (NPM), ejecutando el siguiente comando en la terminal:

Cuando esté listo para compilar el.menosarchivo, simplemente ejecute el siguiente comando, asegurándose de especificar el archivo en el que el compilador debe escribir la salida.

En elestilo.menosarchivo, cree dos variables, a saber:ancho del contenedorycontenedor-bg-colorpara representar el ancho y el color de fondo del"envase"divrespectivamente.

A continuación, cree tres variables, a saber:cadena,patrón,yreemplazo . Luego agregue los estilos para el"envase"divy elh1elemento.

En el bloque de código anterior, elrango()La función establece elrellenopropiedad en el"envase"div . El compilador Less debería compilar elestilo.menosarchivo en lo siguiente:

Cuando abres elíndice.htmarchivo en el navegador, esto es lo que debería ver:

En los lenguajes de programación habituales, las funciones reducen la cantidad de código que necesita escribir y minimizan los errores. Los preprocesadores CSS como Less proporcionan varias características que facilitan la escritura de código CSS.

Los preprocesadores CSS resultan útiles cuando se trabaja con archivos grandes. Facilitan la depuración de problemas, mejorando así la productividad del desarrollador.

David Uzondu es un desarrollador de JavaScript con más de 3 años de experiencia. Le encanta escribir en su tiempo libre.