Cómo usar funciones en menos CSS

Less CSS es un preprocesador de CSS sólido y dinámico que ha atraído una gran 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 que se usa en la web. desarrollo, al proporcionar una variedad de características y funcionalidades adicionales que mejoran el estilo general experiencia.

Si está bien versado en la escritura de CSS estándar, puede pasar sin problemas a usar Less CSS sin una curva de aprendizaje pronunciada. Esta compatibilidad facilita el mantenimiento de su conocimiento CSS existente mientras aprovecha las capacidades avanzadas de Less.

¿Qué son las funciones y por qué son importantes?

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

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

funcióncomprobarDescuento(precio, umbral){
si (precio >= umbral){
dejar descuento = 5/100 * precio;
devolver`Tu descuento es de $${descuento}`;
 } demás {
devolver`Lo sentimos, este artículo no califica para un descuento. `
 }
}

Luego puede llamar a la función y pasar el precio y el límite.

dejar precio = aviso ("Ingrese el precio del artículo: ")
alerta (checkDescuento (precio, 500))

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 solo lo básico.

Comprender las funciones en menos CSS

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 la función matemática calc() que hace exactamente lo que parece: realiza cálculos y usa el resultado como un valor de propiedad en CSS.

pag{
color de fondo: rojo;
ancho: calcular(13píxeles- 4píxeles);
}

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

@ancho: 10px;
@altura: 20 píxeles;
división{
margen:si((@ancho > @altura), 10px, 20 píxeles)
}

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

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

división {
margen: 20píxeles;
}

Cómo usar un valor booleano en Less

Un booleano es una variable que tiene dos valores posibles: verdadero o FALSO. Con el booleano() 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.

@color de texto: rojo;
@bg-color: booleano(@color-texto = rojo);

En el bloque de código anterior, el compilador Less comprueba si color de texto es rojo. Entonces el bg-color variable almacena el valor.

división{
color de fondo: si(@bg-color,verde amarillo);
}

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

división {
color de fondo: verde;
}

Reemplazo de texto dentro de una cadena con la función replace ()

La sintaxis para el reemplazar() la función se ve así:

reemplazar(cadena, patrón, reemplazo, banderas)

cadena representa la cadena en la que desea buscar y reemplazar. patrón es 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 reemplaza eso patrón con el reemplazo.

Opcionalmente, el reemplazar() La función también puede contener el banderas parámetro para banderas de expresión regular.

@cadena: "Hola";
@patrón: "hola";
@reemplazo: "i";
división::antes{
contenido: reemplazar(@cadena,@patrón,@reemplazo)
}

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

división::antes {
contenido: "Hola";
}

Listar funciones en Less CSS

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

@comestibles: "pan", "banana", "papa", "leche";

Puedes usar el longitud() función para evaluar el número de elementos en la lista.

@resultado: longitud(@comestibles);

También puede utilizar el extracto() función para extraer el valor en una posición particular. Por ejemplo, si desea obtener el tercer elemento en el comestibles lista, haces lo siguiente:

@tercer-elemento: extraer(@comestibles, 3);

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

Otra función de lista que podría resultar útil al crear sitios web con Less es la rango() función. Toma en 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 decremento entre cada elemento del rango. Si no se proporciona, el valor predeterminado es 1.

división {
 margen: rango (10px, 40px, 10);
}

El bloque de código anterior debe compilarse hasta lo siguiente:

división {
 margen: 10px 20px 30px 40px;
}

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

Construyendo un sitio web simple con menos funciones CSS

Es hora de reunir todo lo que has aprendido y crear un proyecto simple con Less CSS. Crear una carpeta y agregar índice.htm y estilo.menos archivos

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

html>
<htmlidioma="es">
<cabeza>
<metajuego de caracteres="UTF-8">
<metanombre="ventana de visualización"contenido="ancho=ancho-del-dispositivo, escala-inicial=1.0">
<enlacereal="hoja de estilo/menos"tipo="texto/css"href="estilo.sin" />
<título>Documentotítulo>
cabeza>
<cuerpo>
<divisiónclase="envase">
<h1>
h1>
división>
<guionorigen=" https://cdn.jsdelivr.net/npm/less" >guion>
cuerpo>
html>

En el bloque de código de arriba, hay un padre "envase"división con un vacío h1 elemento. El origen atributo en el guion La etiqueta apunta a la ruta de Less CSS Compiler.

Sin esto guion etiqueta, el navegador no podrá entender su código. Alternativamente, puede instalar Less CSS en su computadora a través de Administrador de paquetes de nodos (NPM), ejecutando el siguiente comando en la terminal:

npm instalar -g menos

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

menos estilo.menos estilo.css

En el estilo.menos archivo, cree dos variables a saber: ancho del contenedor y contenedor-bg-color para representar el ancho y el color de fondo de la "envase"división respectivamente.

@contenedor-ancho: 50 rem;
@contenedor-bg-color: amarillo;

A continuación, cree tres variables, a saber: cadena, patrón, y reemplazo. A continuación, agregue los estilos para el "envase"división y el h1 elemento.

@cadena: "¡Hola de parte de los niños del planeta Tierra!";
@patrón: "¡Hijos del planeta Tierra!";
@reemplazo: "habitantes de Plutón!";
.envase{
ancho: @contenedor-ancho;
color de fondo: @contenedor-bg-color;
relleno: si(@contenedor-ancho > 30 rem, rango(20 píxeles, 80px, 20),"");
borde: sólido;
}
h1:primer hijo::después{
contenido: reemplazar(@cadena,@patrón,@reemplazo);
}

En el bloque de código anterior, el rango() función establece el relleno propiedad en el "envase"división. El compilador Less debe compilar el estilo.menos archivo en lo siguiente:

.envase {
ancho: 50movimiento rápido del ojo;
color de fondo: amarillo;
relleno: 20píxeles 40píxeles 60píxeles 80píxeles;
borde: sólido;
}
h1:primer hijo::después {
contenido: "HoladeelhabitantesdePlutón!";
}

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

Mejore su productividad con preprocesadores CSS

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

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