# Cómo crear un frontend moderno con Vanilla JS, Sass y Vite (Guía paso a paso)

> Aprende a crear un frontend moderno con Vite, Vanilla JS y Sass. Rápido, ligero y perfecto para proyectos simples. ¡Empieza en minutos!

- URL canónica: https://www.martagonzalez.dev/blog/proyecto-vanilla-js-sass-con-vite/
- Fecha de publicación: 2023-01-14T13:19:20
- Última actualización: 2025-11-06T11:49:24

---

¿Sabes ese momento en el que tienes una idea y solo quieres empezar a construirla ya ?
 
Bueno, a mí me pasó hace poco. Tenía un rato libre, una idea clara y ganas de probar algo visual.
 
Pensé: “Va, algo sencillo con Vanilla JS y Sass”.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2023/01/proyecto-con-vite-vanillajs-y-sass-linkedin.jpg)
 

 
Lo típico… abrí el editor, instalé dependencias, empecé a configurar cosas… y a la media hora ya estaba buscando errores en la consola en vez de escribir código. Ahí fue cuando paré y pensé: esto tiene que ser más fácil .
 
Me acordé de Vite —lo había usado una vez, de pasada— y decidí intentarlo. Literal: npm create vite , plantilla vanilla , y en menos de cinco minutos ya tenía todo corriendo. Le sumé Sass y… por fin pude dedicarme a crear en vez de pelearme con la configuración.
 
Y como sé que no soy la única a la que le pasa esto, armé esta guía paso a paso para que montes tu propio entorno moderno, limpio y funcional con Vanilla JS , Sass y Vite .
 
## ¿Por qué Vite?
 
Vite usa módulos ES nativos , recarga instantánea y una configuración mínima. Si trabajas con JS puro, Vite te da lo justo y necesario para ir al grano, sin sacrificar rendimiento.
 
## Paso a paso para crear tu proyecto
 
Creamos nuevo proyecto utilizando el siguiente comando.
 
npm create vite Selecciona la plantilla vanilla .
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2023/01/proyecto-vite-vanilla-sass-01.jpg)
 
Entra en el proyecto e instala paquete y sus dependencias.
 
cd nombre-proyecto npm install ## Cómo integrar Sass sin complicarte Para trabajar con sass es necesario instalar un módulo extra.
 
npm add -D sass Si abrimos el fichero package.json podremos comprobar que ya tenemos instalada nuestra nueva dependencia.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2023/01/proyecto-vite-vanilla-sass-02.jpg)
 
Cambia style.css por style.scss y comienza a usar variables, mixins, y funciones:
 
$color-principal: #1e88e5; h1 { color: $color-principal; } Organiza tus estilos en /base , /components , /layouts para mantener claridad.
 
![Imagen del artículo](https://martagonzalez.dev/wp/wp-content/uploads/2023/01/proyecto-vite-vanilla-sass-03.jpg)
 
## Ejecuta y disfruta
 
npm run dev El navegador se abrirá solo, con recarga en caliente y un entorno listo para trabajar.
 
Esta combinación de herramientas puede parecer simple, pero bien usada es una base sólida y profesional para crear sitios modernos, rápidos y mantenibles. Porque a veces, menos sí es más.
 
## 🚀 En resumen: cómo crear un frontend moderno con Vite
 
🛠️ Qué aprenderás: Esta guía paso a paso te enseñará a construir un frontend moderno con Vite usando tecnologías simples como Vanilla JS y Sass.
 
🔗 Herramientas principales:
 

- [Vanilla JS](https://martagonzalez.dev/blog/que-es-vanilla-js/) 
- [Sass](https://sass-lang.com/) 
- [Vite](https://vitejs.dev/)
 
> 💡 ¿Por qué elegir Vite? Porque es rápido, sencillo y perfecto para prototipos o proyectos minimalistas.
 
📚 Si te interesa mejorar tu flujo de trabajo, te recomiendo este artículo sobre [atajos para Visual Studio Code](https://martagonzalez.dev/blog/atajos-y-trucos-para-usar-visual-studio-code-desde-la-terminal-en-mac-como-una-pro/).