Ejercicio 3 – Import y Partials en SCSS

📄 Enunciado

En este ejercicio se trabaja con partials en SCSS para dividir el código en archivos más pequeños y manejables.

Utilizaremos la directiva @import (o la moderna @use) para unificar todos los archivos en un único CSS resultante.

🎯 Requisitos

• Crear partials para variables (_variables.scss) y mezcla de estilos (_mixins.scss).
• Importar los partials en un archivo principal (main.scss).
• Asegurarse de que los nombres de los partials empiecen por guion bajo (_) para evitar que se compilen por separado.

📌 Estructura del proyecto

/ejercicio3
  ├── index.html
  └── scss
      ├── _variables.scss
      ├── _base.scss
      └── main.scss
          

💻 HTML de apoyo

<button class="btn btn-primary">Enviar</button>

✅ Solución (SCSS)

// _variables.scss
$primary-color: #3498db;

// main.scss
@import "variables";
@import "base";

.btn-primary {
  background-color: $primary-color;
  border: none;
  padding: 10px 20px;
}