Ejercicio 2 – Anidamiento en SCSS

📄 Enunciado

El anidamiento (nesting) es una de las funcionalidades más potentes y utilizadas de SCSS. Nos permite escribir selectores CSS siguiendo la misma jerarquía visual que nuestro HTML, lo que hace el código mucho más legible y fácil de mantener.

En este ejercicio, transformaremos un CSS plano y repetitivo en una estructura anidada y limpia.

🎯 Requisitos

• Utilizar el selector de padre (&) para pseudo-clases como :hover o :active.
• Anidar elementos dentro de su contenedor principal (ej: li dentro de ul).
• Evitar un anidamiento excesivo (máximo 3 niveles recomendado por buenas prácticas).

📌 Estructura del proyecto

/ejercicio2
  ├── index.html
  └── scss
      └── layout.scss
          

💻 HTML de apoyo

<nav class="main-nav">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

✅ Solución (SCSS)

.main-nav {
  background: #333;
  padding: 1rem;

  ul {
    list-style: none;
    display: flex;
    gap: 20px;

    li {
      a {
        color: white;
        text-decoration: none;
        transition: color 0.3s;

        &:hover {
          color: #ffcc00;
        }
      }
    }
  }
}

❓ ¿Por qué es útil el anidamiento?

Reduce drásticamente la repetición de selectores y ayuda a agrupar estilos relacionados, facilitando la comprensión de la estructura de la página directamente desde la hoja de estilos.