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, input, image, li)
- 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 Bidirecional
Uso
- Abre un archivo CSS (.css, .scss, .less, .html, .php, .javascript)
- Selecciona una clase CSS o una regla completa, tambien funciona con style
- Haz clic derecho y selecciona "VisualCSS - Ver Estilo" o Ctrl + K Ctrl + E
- 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
- Bidireccional
- Scroll
- Agrega propiedades nuevas
- Galeria de clases, selecciona una y clic aparece nuevo Visor
- Box Model Visual
- Property search
Requisitos
- VS Code 1.75.0 o superior
Versiones Anteriores
- v3.0.0: Color error completely corrected
- v2.9.0: Error parse colors
- v2.7.0: Error control bidireccional
- v2.6.0: Error control Bidirectional sync
- v2.4.0 > 5.0 Gallery View clic view class
- v2.3.0: Gallery View, Color Picker, Complex Colors, jsDoc, Icons
- v2.2.0: Keyboard navigation, input sync, type detection
- v2.1.0: Basic editor, preview, dropdowns
- v2.0.0: Bidirectional sync protocol
- v1.0.0: Initial release
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 -
☕ Apoya el proyecto
Si quieres contribuir a la ampliación, ¡invítame a un café!
| |
