Variables y funciones en CSS

Temario variables y funciones en CSS

1. Custom Properties (Variables CSS)
2. Función url()
3. Función calc()
4. Funciones min() & max()
5. Función clamp()

Custom Properties (Variables CSS)

Una Custom properties (o Propiedad configurable) es una variable, es decir un espacio reservado de memoria en la computadora que va a almacenar el valor de un dato.

Las variables en CSS (al igual que en muchos lenguajes de programcaión) van a tener un alcance o scope, que es el ambito en el que existen y ese ambito va a ser el selector en el que definamos la declaracion de la variable y todos sus elementos subsecuentes, es decir toda la cadena de hijos en la estructura HTML que tengamos a partir del selector donde se definio la variable.

Las variables se deben definir dentro de un selector, por ejemplo:
.custom-props-1 {
--primary-color: gray;
--font-size: 32px;
}

NOTA: Podemos definir variables con el mismo nombre dentro de diferentes selectores y no se va apresentar ningun problema, ya que cada una de esas variables tiene un alcance o scope que es el selector dentro del cual se definieron, por lo tanto no se genera conflicto entre ellas.

En css todas las variables se declaran al inicio con dos guiones --.
Cuando ccs detecta que se empieza con dos guiones -- es que se esta declarando una variable.

Para usar una variable ccs usamos la función var() y dentro de los parentesis llamamos la variable que queremos usar.
La funcion var() recibe un segundo parametro que puede dar un valor por defecto, es decir que si no encuentra el primer valor aplica el segundo.

Si queremos que una variable exista dentro de un selector en particular la definimos dentro de ese selector, si queremos que exista para todos los elementos dentro del documento HTML, declaramos las variables en la etiqueta HTML pero utilizamos una pseudoclase llamada :root que hace referencia a la etiqueta HTML, ejemplo:
:root {
--default-bg-color: skyblue;
}

Ejemplos:

Función url()

La funcion url() se usa para especificar la ruta donde se encuentra el origen de algun recurso que querramos cargar, es decir que nos permite invocar contenido externo a la hoja de estilos como rutas de imagenes, hojas css, tipografias, etc.

Función calc()

La funcion calc() nos sirve para hacer calculos aritmeticos.

Ejemplos:

Funciones min() & max()

Estas son funciones a las cuales les podemos dar diferentes valores esparados por comas y siempre va a tomar el valo que sea minimo o maximo dependiendo de la funcion que estemos utilizando.

min(): Va a tomar el menor valor entre los valores que le hayamos asignado.

max(): Va a tomar el mayor valor entre los valores que le hayamos asignado.

Ejemplos:

Función clamp()

Esta es una funcion que va a recibir 3 valores.

1. Tamaño minimo:
2. Tamaño ideal:
3. tamaño maximo:

Ejemplos: