@function
Esta función está como experimental, sólo la tenemos disponible por ahora en Chrome(v139+) y Edge(v139+).
@function de CSS es una nueva regla que busca traer lógica y reutilización al lenguaje, similar a cómo funcionan las funciones en preprocesadores como Sass, pero nativas del navegador.
¿Qué es la regla @function en CSS?
La regla @function te permite definir tus propias funciones personalizadas directamente en CSS. Estas funciones pueden:
1. Aceptar argumentos (parámetros).
2. Realizar cálculos o lógica compleja.
3. Devolver un valor que puede usarse en cualquier propiedad CSS (por ejemplo, en width, font-size, color, etc.).
Piensa en @function como una manera de encapsular lógica compleja (como conversiones de unidades o tipografía fluida) para que no tengas que repetirla o usar calc() complicados una y otra vez.
Sintaxis
La sintaxis básica incluye la regla @function, un nombre con doble guion (--), los parámetros y el descriptor result para la salida.
@function --oscurecer(--value) {
result: color-mix(in srgb, var(--value), black 50%);
}
@function --suavizar(--value) {
result: color-mix(in srgb, var(--value), white 50%);
}
main {
min-width: 100px;
max-width: 500px;
padding: 20px;
background: red;
transition: background 1s;
border-radius: 15px;
&:hover {
background: --oscurecer(blue);
color: --suavizar(black);
@supports not (background: --oscurecer(blue)){
background-color: cadetblue;
}
@supports not (color: --suavizar(black)){
color: pink;
}
}
}- El nombre de la función debe ser un identificador precedido con doble guión (como las propiedades personalizadas o variables de CSS).
- A diferencia que en los lenguajes de programación como JS/Java/etc. no se usa return sino la palabra reservada result: cuando la función devuelve algo.
Debido a su compatibilidad limitada, si deseas usar @function hoy, debes implementarlo como una mejora progresiva usando la regla @supports para proporcionar una solución alternativa para navegadores que aún no la soportan:
&:hover {
background: --oscurecer(blue);
color: --suavizar(black);
/* Para aquellos navegadores que no soporten esta rule de CSS */
@supports not (background: --oscurecer(blue)){
background-color: cadetblue;
}
@supports not (color: --suavizar(black)){
color: pink;
}
}