Introducció a les Variables de CSS

Les variables de CSS, també conegudes com a propietats personalitzades, permeten definir valors reutilitzables en el full d'estils. Això facilita la gestió i manteniment del codi CSS, especialment en projectes grans. Les variables de CSS es defineixen amb el prefix -- i es poden utilitzar en qualsevol lloc del full d'estils.

Avantatges de les Variables de CSS

Reutilització de Valors: Permet definir un valor una vegada i reutilitzar-lo en múltiples llocs.
Facilitat de Manteniment: Canviar el valor d'una variable actualitza automàticament tots els llocs on s'utilitza.
Organització del Codi: Ajuda a mantenir el codi més net i organitzat.

Definició i Ús de Variables de CSS

Definició de Variables

Les variables de CSS es defineixen dins d'un selector, generalment en el selector :root per fer-les accessibles globalment.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

Ús de Variables

Per utilitzar una variable de CSS, es fa servir la funció var(). Aquí teniu un exemple:

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: var(--font-size);
}

Exemple Pràctic

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple de Variables de CSS</title>
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --font-size: 16px;
      --padding: 10px;
    }

    body {
      background-color: var(--primary-color);
      color: white;
      font-size: var(--font-size);
      padding: var(--padding);
    }

    h1 {
      color: var(--secondary-color);
    }
  </style>
</head>
<body>
  <h1>Hola, Món!</h1>
  <p>Aquest és un exemple d'ús de variables de CSS.</p>
</body>
</html>

Variables de CSS amb Valors per Defecte

Les variables de CSS també poden tenir valors per defecte que s'utilitzen si la variable no està definida.

body {
  background-color: var(--primary-color, #333);
}

En aquest exemple, si --primary-color no està definida, el color de fons serà #333.

Exercicis Pràctics

Exercici 1: Definir i Utilitzar Variables de CSS

Definició: Defineix les següents variables en el selector :root:
- --main-bg-color: #f0f0f0
- --main-text-color: #333
- --main-padding: 20px
Ús: Aplica aquestes variables a un element div amb la classe .container:
- Fons: --main-bg-color
- Color de text: --main-text-color
- Farciment: --main-padding

Solució de l'Exercici 1

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici de Variables de CSS</title>
  <style>
    :root {
      --main-bg-color: #f0f0f0;
      --main-text-color: #333;
      --main-padding: 20px;
    }

    .container {
      background-color: var(--main-bg-color);
      color: var(--main-text-color);
      padding: var(--main-padding);
    }
  </style>
</head>
<body>
  <div class="container">
    <p>Aquest és un exemple d'ús de variables de CSS.</p>
  </div>
</body>
</html>

Conclusió

Les variables de CSS són una eina poderosa per millorar la reutilització, manteniment i organització del codi CSS. Permeten definir valors una vegada i utilitzar-los en múltiples llocs, facilitant els canvis globals i mantenint el codi net i estructurat. Amb la pràctica, les variables de CSS es convertiran en una part essencial del vostre flux de treball de desenvolupament web.

Variables de CSS

Introducció a les Variables de CSS

Avantatges de les Variables de CSS

Definició i Ús de Variables de CSS

Definició de Variables

Ús de Variables

Exemple Pràctic

Variables de CSS amb Valors per Defecte

Exercicis Pràctics

Exercici 1: Definir i Utilitzar Variables de CSS

Solució de l'Exercici 1

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu