Emmet es uno de los complementos de editor de texto más útiles que jamás encontrarás para los desarrolladores. Tiene la aparentemente mágica capacidad de convertir un poco de trabajo en una tonelada de código, lo que puede ahorrarle una increíble cantidad de tiempo y esfuerzo a largo plazo.
Anteriormente, echamos un vistazo a algunas de las mejores características de Emmet desde una perspectiva HTML, hoy vamos a seguir con algunos consejos sobre cómo Emmet puede mejorar su flujo de trabajo CSS.
1. Abreviaturas intuitivas
Trabajar con Emmet en HTML es bastante sencillo. Después de que aprendas algunos conceptos clave, puedes correr con ellos por tu cuenta. Sin embargo, con CSS, hay literalmente cientos de fragmentos de código para memorizar. Es genial tener tanta funcionalidad, pero ¿cómo puedes asimilarlo todo?
La buena noticia es que Emmet utiliza abreviaturas que son completamente intuitivas. De hecho, en la mayoría de los casos, la primera abreviatura que piensas probar es correcta. Aquí hay dos ejemplos:
Como puedes ver, texto alineado se acorta a ejército de reserva y ancho del borde se acorta a bdw. Muchas abreviaturas son activadas incluso por un solo carácter. Por ejemplo, z se expande a índice z.
2. Añadir valores
Puede hacer mucho más con Emmet que expandir las abreviaturas en propiedades. Por ejemplo, puede agregar fácilmente un valor a su abreviatura usando la sintaxis de dos puntos.
Aquí, :10 expandido a 10px y una expandido a auto. También puede especificar sus unidades con este método simplemente lanzándolos al final. Tenga en cuenta que pag Es un buen atajo para%.
3. Búsqueda borrosa
La mejor característica de Emmet desde una perspectiva CSS se llama "búsqueda difusa". Lo que esto significa es que realmente no tienes que conocer la abreviatura adecuada para llegar a la expansión que estás buscando. Literalmente, puedes hacer una mierda, y en la mayoría de los casos, Emmet es lo suficientemente inteligente como para descubrir qué es lo que estás tratando de lograr.
La búsqueda difusa aumenta enormemente la utilidad de Emmet para escribir CSS. Te permite descartar la sintaxis estándar a favor de lo que más te guste. Por ejemplo, rara vez uso dos puntos para agregar un valor y en su lugar escribo algo como m10, que se expande en margen: 10px.
4. Use + para Extras
Con HTML, el? +? El símbolo se usa para las relaciones entre hermanos, pero en CSS vemos que se usa de manera diferente. Aquí agregamos + para indicar que queremos que Emmet incluya cualquier opción adicional incluida en la abreviatura. Esto lo vemos mucho cuando hay una versión abreviada de un conjunto dado de propiedades.
Aquí puedes ver que si simplemente expandimos F, obtenemos tamaño de fuente sin extras Sin embargo, cuando lanzamos el? + ?, obtenemos una plantilla para la abreviatura de la fuente. A continuación, vemos esta misma idea en acción con la taquigrafía del borde.
Puede utilizar el símbolo más con imágenes de fondo, @ font-face, text-outline, text-shadow y más.
5. Prefijos de proveedores
¿Odia escribir todos esos prefijos de proveedores molestos? Yo también. Afortunadamente, Emmet te tiene cubierto. Escriba una propiedad CSS con un guión delante de ella y se expandirá automáticamente para incluir todos los prefijos relevantes.
Puede realizar esta acción en casi cualquier cosa que desee. Por ejemplo, si usted escribe ? -designshack?, se ampliará a -webkit-designshack, -moz-designshack, etc.
6. Gradientes
La sintaxis del gradiente apesta, todos lo sabemos. Ha cambiado y evolucionado demasiadas veces para contar, ha pasado por todas las combinaciones posibles de demasiado complejas y simples, y no solo debe tener en cuenta todos los prefijos, sino también al menos dos iteraciones diferentes de la versión -webkit.
Una vez más, Emmet se apresura a salvar el día. Puede ahorrarse mucho escribiendo con la sintaxis de gradiente taquigráfico única de Emmet, que se expandirá en la gran cantidad de código que necesita. Puedes leer más sobre esto y probarlo aquí.
¡Pruébalos!
Ahora que conoces un montón de excelentes trucos CSS para probar con Emmet, es hora de darles una oportunidad. Acceda a nuestra página de demostración de Emmet y pruebe algunas de las abreviaturas que mencionamos anteriormente. También asegúrese de ir a la página de inicio de Emmet, donde puede aprender más y probarlo por sí mismo de inmediato.
¿Cómo amplío las abreviaturas?
La expansión puede ser diferente en cada editor y normalmente requiere un complemento. En Sublime Text 2, abra Package Manager, busque Emmet, instálelo y luego reinicie la aplicación. Para desencadenar una expansión, simplemente pulsa lengüeta después de escribir en una abreviatura.
Comparta sus macros CSS favoritos de Emmet
Esa es mi lista personal de características de Emmet CSS favoritas, ahora es el momento de que entres en la conversación y compartas la tuya. Deja un comentario a continuación y enumera las características de CSS a las que más recurres en Emmet.