Nuevo en FSCSS Condicional @event y depuración con exec()
Ahora puedes añadir lógica en tu CSS y depurar valores en vivo. La función num convierte cadenas a números para cálculos, mientras que @event te permite definir funciones reutilizables en tus hojas de estilo.
Cómo funciona un ejemplo típico con @event scaleSize e
Si e es mayor o igual que 8 devuelve num 8*2 em que resulta 16em y ejecuta exec _log mayor o igual que 8 Scaling to 16em for optimal readability con una nota de que se limita a 16em para entradas grandes. Si e es menor que 8 devuelve num 8/5*8 em que resulta aproximadamente 10.24em y ejecuta exec _log menor que 8 Scaling to 10.24em for compact views con una nota de que se ajusta para vistas compactas. En cualquier otro caso devuelve num 8 em y ejecuta exec _warn No match Using default 8em check your input value como valor por defecto.
Uso práctico en una tarjeta de interfaz .card puede establecer width con @event.scaleSize 8 para obtener 16em, height con @event.scaleSize 7 para obtener ~10.24em y añadir transition all 0.3s ease para suavizar la animación.
Condiciones disponibles en FSCSS ==, >=, <=, >, <. Métodos de depuración disponibles _log, _warn, _info, _error. Ejemplo de depuración define una variable $greetings con el texto Hello, World!, luego ejecuta exec _log $greetings para ver el valor, exec _info Var value $greetings para añadir contexto, exec _warn Deprecated var used $greetings como aviso y exec _error Failed to compute $greetings para errores críticos.
Compatibilidad Funciona en navegadores modernos con el cargador JS de FSCSS a través de CDN. Tras la carga de la página o del disparo de eventos, revisa la consola del navegador para ver los mensajes de depuración.
Puedes compilar y probar un ejemplo en el compilador online de FSCSS aquí abrir compilador
En Q2BSTUDIO impulsamos productos digitales con enfoque de ingeniería. Si deseas integrar FSCSS en un proyecto real, acelerar tu front end con lógica declarativa, automatizar despliegues y mejorar la observabilidad del estilo, nuestro equipo puede ayudarte con aplicaciones a medida, software a medida, integración continua y calidad desde el diseño hasta producción. Descubre cómo abordamos proyectos de desarrollo multiplataforma en nuestra página de aplicaciones a medida y software a medida.
También somos especialistas en inteligencia artificial e IA para empresas, desde agentes IA en front end para asistencia contextual hasta pipelines de datos que enriquecen tus estilos y contenidos con recomendaciones en tiempo real. Conoce nuestras capacidades en inteligencia artificial y cómo combinamos modelos, pruebas A B y analítica para acelerar la toma de decisiones.
Además contamos con una práctica integral en ciberseguridad, pentesting preventivo, servicios cloud AWS y Azure, servicios inteligencia de negocio y power bi para elevar tu reporting y gobierno del dato. Si estás evaluando migraciones, automatización de procesos o la creación de agentes IA orientados a negocio, hablemos y lleva tu producto al siguiente nivel con Q2BSTUDIO.
CSS está evolucionando y con FSCSS no solo estás maquetando, estás diseñando sistemas. ¿Dudas, ideas o casos de uso potentes Compártelos y sigamos iterando juntos.