Ejercicio 1 – Variables SCSS

📄 Enunciado

En este primer ejercicio de SCSS, el objetivo es aprender a declarar y utilizar variables para centralizar los valores de colores, tipografías y otros parámetros de diseño.

No se permite escribir valores “a mano”; todo debe venir de variables.

4️⃣ Pregunta teórica

¿Qué cambiarías si el color principal de la web pasara a ser rojo?

🎯 Requisitos

Definir variables para los colores: $primary (azul), $secondary (gris oscuro), $text-color (negro/gris).
Definir una variable para la fuente principal: $font-stack.
Aplicar estas variables a todo el documento (cuerpo, títulos, enlaces).

📌 Estructura del proyecto


/ejercicio1
  ├── index.html
  └── scss
      └── styles.scss

💻 HTML de apoyo

<!DOCTYPE html>
<html lang="es">
<head>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    <h1>Bienvenido a mi sitio</h1>
  </header>
</body>
</html>

✅ Solución (SCSS)

// 1. Declaración de variables
$color-principal: #3498db;
$color-secundario: #2c3e50;
$fuente-base: "Outfit", sans-serif;

// 2. Uso de variables
body {
  font-family: $fuente-base;
  color: $color-secundario;
}

header {
  background-color: $color-principal;
  color: white;
}

❓ ¿Qué cambiarías si el color principal fuera rojo?

Únicamente sería necesario modificar el valor de la variable $color-principal:

$color-principal: #e74c3c; // Ahora es rojo

🔍 Ver resultado 📦 Ver repositorio