VisualCSS - Editor Visual de Estilos CSS para VS Code

Una extensión de VS Code que permite visualizar, editar y previsualizar estilos CSS de manera interactiva.

Características

✨ Visualización interactiva de estilos CSS

• Selecciona una clase CSS y visualízala en tiempo real
• Previsualiza con diferentes elementos HTML (div, span, a, button, p, h1, h2, h3)
• Edita propiedades CSS y ve los cambios instantáneamente

🎨 Editor de propiedades CSS

• Modifica propiedades existentes
• Agrega nuevas propiedades
• Valida la sintaxis CSS
• Vista previa del código CSS generado

💾 Aplicación de cambios

• Guarda los cambios directamente en tu archivo CSS
• Reemplaza automáticamente la regla CSS original

Uso

1. Abre un archivo CSS (.css, .scss, .less)
2. Selecciona una clase CSS o una regla completa
3. Haz clic derecho y selecciona "VisualCSS - Ver Estilo"
4. En el panel que se abre:
   • Selecciona el elemento HTML para la previsualización
   • Modifica las propiedades CSS
   • Agrega nuevas propiedades si lo necesitas
   • Haz clic en "Aplicar Cambios" para guardar en el archivo

Requisitos

• VS Code 1.75.0 o superior

Licencia

Actualmente estamos en fase Beta

El software se cede bajo licencia y no es objeto de venta, reservándose todos los derechos de autor y distribución.

Autores

Creado con ❤️ para desarrolladores CSS Alfonso González - Goldfinger -