Usa variables CSS para el marcado del editor
Hola @artf Después de un año, me pregunto si tu opinión sobre este tema ha cambiado. Nos encantaría usarlo y IE11 cada vez es menos común ;) @SamMousa si necesitas ayuda con la PR, también podemos contribuir. ¡Espero con ganas noticias tuyas! Philipp
Lee la respuesta completa abajo ↓Pregunta
Dado que todos los navegadores modernos (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Browser_compatibility) soportan variables CSS, el valor añadido de usar SCSS para ellas es limitado.
No propongo eliminar completamente el SCSS, lo que sí propongo es lo siguiente:
- Sustituir todos los usos de las funciones 'oscurecer()' y 'aclarar()' y sustituirlos por variables SCSS en '_gjs_variables.scss'.
- Para todas las variables sass usadas en '_gjs_variables.scss', recompláyelo por la variable css: '''sass Esto $primaryColor: #444 !default; Se convierte :root { --GJS-color-primario: #444; } $primaryColor: var(--gjs-color-primario);
Este es un cambio sencillo que no debería provocar una ruptura de anticonceptivos. Después de hacer esta tematización, el editor se volverá aún más sencillo, ya que podemos simplemente especificar las variables directamente en CSS y listo; No es necesario recompilarlo.
Respuestas (3)
Hola @artf Después de un año, me pregunto si tu opinión sobre este tema ha cambiado. Nos encantaría usarlo y IE11 cada vez es menos común ;) @SamMousa si necesitas ayuda con la PR, también podemos contribuir. ¡Espero con ganas noticias tuyas! Philipp
Después de un año, me pregunto si tu opinión sobre este asunto ha cambiado.
Desafortunadamente, no depende solo de mi decisión; por lo que sé, siguen siendo un buen porcentaje de usuarios que dependen de la compatibilidad con IE11. Así que la única solución sería crear un buen uso de importación de archivos SCSS (evitar escribir dos veces la misma declaración de estilos) y generar un nuevo archivo CSS con propiedades personalizadas.
Por ahora, cerraré el tema porque la tracción para esto es muy baja, pero una imagen personal sería bienvenida
Haré un récord personal si estás abierto a esto.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #5746
El desplazamiento de ColorPicker incorrecto cuando los paneles están fuera del contenedor del editor
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Chrome v122 Enlace de demo reproducible h...
Issue #4529
Cuando redimensionamos una imagen con la clase 'xyz', todos los elementos de la página con la misma clase también se redimensionan porque el editor añade CSS a esas clases.
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Versión 104.0.5112.101 (Versión oficial) (a...
Issue #3413
Añadir scripts en línea y actualizar eventos antiguos
En ese caso, te sugiero que accedas al documento del iframe y añadas manualmente el script en línea (para conseguir el documento usa 'edito...
Issue #588
Cambios en la interfaz del editor
! imagen Me gustaría que el editor le gustara la foto de arriba. Sin embargo, no encuentro el CSS ni para el fondo ni para los paneles. Cua...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Tutorial
Why use grapesjs shadcn for your template builder
Skip months of editor plumbing and start with a fully working visual builder — polished UI included.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.