Acelera el desarrollo usando Emmet en Modyo

Felipe Meyer

Emmet es una herramienta integrada en el módulo de Channels en Modyo que nos ayuda a mejorar el flujo de trabajo HTML y CSS. Nos ayuda a acelerar la manera en la que escribimos código, utilizando abreviaturas para no tener que escribir el código completo.

Syntaxis de Emmet en HTML

La sintaxis en Emmet en HTML es simple, solo basta con escribir cualquier elemento sin tags < > y presionando el tabulador, Emmet automáticamente generará la etiqueta HTML.

Por ejemplo si escribimos html y presionamos el tabulador

<html></html>

Hermanos +

h1+h2+p+btn

<h1></h1>
<h2></h2>
<p></p>
<button></button>

Hijos >

table>tr>td

<table>
    <tr>
        <td></td>
    </tr>
</table>

Subir nivel ^

table>tr>td^^ul>li

<table>
    <tr>
        <td></td>
    </tr>
</table>
<ul>
    <li></li>
</ul>

Multiplicación *

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Agrupamiento ()

(table>tr>td)*2

<table>
    <tr>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
    </tr>
</table>

(table>tr>td)+ul>li

<table>
    <tr>
        <td></td>
    </tr>
</table>
<ul>
    <li></li>
</ul>

Sintaxis de Emmet en CSS

En CSS la sintaxis de Emmet no es tan simple como en HTML pero nos ayuda a autocompletar, de la misma manera que en HTML en CSS utilizamos la abreviatura y apretamos tabulador.

Por ejemplo, puede expandir la letra 'm' para obtener un margen, podemos apretar m + tab y nos entrega

margin: ;

Igual podemos darle un valor al margen agregando un número después del m

m10

margin: 10px;

Si no especificamos el valor del número nos va a dar la medida en pixeles pero podemos agregar p, e, o x para que nos de las siguientes medidas:

p → %
e → em
x → ex

w100p

width: 100%

m10p30e5x

margin: 10% 30em 5ex

m10p30e5x

margin: 10% 30em 5ex

Al igual que en HTML podemos agregar más propiedades anidando con + por ejemplo:

m10+p10p

margin: 10px;
padding: 10%;

Si quieres conocer más sobre Emmet revisa su documentación.

Foto por Marc-Olivier Jodoin en Unsplash.

Otros Developer Tips

Architecture

Carlos Solís

Domain Driven Design: Cómo Implementar una Arquitectura Escalable en tu Negocio

Descubre cómo Domain Driven Design te permite construir aplicaciones que se alinean perfectamente con tu negocio. Aplica DDD en arquitecturas de microservicios y micro frontends para crear soluciones más escalables y adaptables, aprovechando el potencial de Modyo.

Widgets

Carlos Solís

Activar el Modo de Depuración en el Modyo CLI

La depuración es una parte esencial del desarrollo de software. Nos permite identificar y corregir errores, optimizando el rendimiento y la estabilidad de nuestras aplicaciones

Contents

Carlos Solís

Imágenes Optimizadas al Instante con Liquid en Modyo

Optimizar imágenes es esencial para cualquier sitio web, sobre todo si buscas que cargue rápido y ofrezca una buena experiencia de usuario

Ver todos los Developer Tips