Cómo usar sintaxis función var() CSS fácil

función var() css

La función var() CSS se utiliza para insertar el valor de una variable CSS (también conocidas como propiedades personalizadas). Esto permite reutilizar valores en toda la hoja de estilos, facilitando el mantenimiento y la creación de temas dinámicos.

Aquí te presento un ejemplo completo con explicación de la función var() css:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de var() en CSS</title>
    <style>
        /* Definimos las variables en el elemento :root para que sean globales */
        :root {
            --color-principal: #007bff; /* Azul */
            --color-secundario: #6c757d; /* Gris */
            --espaciado-mediano: 1rem;
            --fuente-principal: sans-serif;
        }

        body {
            font-family: var(--fuente-principal);
            margin: var(--espaciado-mediano);
        }

        h1 {
            color: var(--color-principal);
            text-align: center;
        }

        p {
            color: var(--color-secundario);
            line-height: 1.6;
        }

        .destacado {
            background-color: var(--color-principal);
            color: white;
            padding: var(--espaciado-mediano);
            border-radius: 5px;
        }

        /* Ejemplo con valor fallback */
        .sin-variable {
            color: var(--color-inexistente, red); /* Si --color-inexistente no está definida, usa rojo */
        }
    </style>
</head>
<body>
    <h1>Título Principal</h1>
    <p>Este es un párrafo de ejemplo. Observa cómo se utilizan las variables CSS para los colores y el espaciado.</p>
    <div class="destacado">
        Este es un elemento destacado con fondo azul y texto blanco.
    </div>
    <p class="sin-variable">Este texto usa un valor fallback porque la variable no existe.</p>
</body>
</html>

Explicación del código:

  1. Definición de variables en la función var() CSS: Las variables se definen dentro del selector :root. Esto las hace accesibles globalmente en todo el documento. Se utiliza la sintaxis --nombre-variable: valor;. Por ejemplo: --color-principal: #007bff;.
  2. Uso de var(): Para utilizar una variable, se emplea la función var(--nombre-variable). Por ejemplo: color: var(--color-principal);.
  3. Valores fallback: Se puede proporcionar un valor por defecto en caso de que la variable no esté definida. Se hace pasando un segundo argumento a la función var(): var(--variable-inexistente, valor-por-defecto). En el ejemplo, si --color-inexistente no está definida, el texto será de color rojo.
  4. Ejemplos de uso: se utilizan variables para definir colores de texto, fondo, espaciado y la fuente.

Ventajas de usar la función var() CSS

  • Mantenimiento simplificado: Si necesitas cambiar un color o un espaciado que se usa en múltiples lugares, solo tienes que modificar el valor de la variable en un solo lugar.
  • Tematización: Facilita la creación de temas diferentes cambiando los valores de las variables.
  • Legibilidad: El código es más legible y comprensible, ya que los nombres de las variables describen su propósito.

ver más entradas sobre diseño web además de función car css

Este tema se investigó en gemini

Deja un comentario