Share
La mayoría de los artículos y tutoriales sobre Emmet cubren su manejo de HTML, pero hoy nos centraremos en Emmet con CSS. ¿Listo para turbo-cargar tu escritura CSS? Vamonos!
Nota: Se recomienda que tenga una comprensión razonable de CSS antes de seguir adelante.
Emmet es una colección de abreviaturas que se expanden a html / xml / css, llevando la idea de fragmentos de texto. Visite la página de descarga e instale Emmet para el editor que elija..
Cuando trabaje con Emmet, escriba la abreviatura apropiada y presione la tecla de acción. En Sublime Text esta es la LENGÜETA llave. La sintaxis del archivo en el que está trabajando determinará qué abreviaturas usar.
Emmet usa abreviaturas de sentido común para facilitar la escritura del código. Puede ayudar un poco o mucho, dependiendo de la cantidad de tiempo que invierta en aprender los entresijos.
Emmet (anteriormente conocido como Codificación Zen) es un conjunto de herramientas para desarrolladores web que puede mejorar considerablemente su flujo de trabajo HTML y CSS.
No solo le ahorra tiempo, sino que hace que escribir código sea divertido. ¡Hay algo en escribir unos pocos caracteres y verlos expandirse mágicamente en un código perfectamente formateado! Si algo sale mal, el botón de deshacer invierte el código expandido a la abreviatura para que lo edites y lo expandas de nuevo..
También he encontrado que Emmet me ayuda a recordar el código más fácilmente. Las abreviaturas son simplemente más fáciles de memorizar.. transformar texto: se convierte en "tt" y alinear texto: justificar; se convierte en "taj". ¿Ves lo útil que puede ser esto? Comenzarás a aprender nuevas propiedades de CSS y solo tendrás que memorizar las abreviaturas. Ni siquiera necesitas preocuparte por puntos y comas, Emmet hace eso por ti.!
Veamos los componentes básicos de las abreviaturas de CSS de Emmet y cómo aceleran el flujo de trabajo.
CSS le da valores a las propiedades, como tamaño de fuente, margen, relleno, etc..
Tomado de la mejor manera de aprender CSS Emmet ha definido todas las propiedades CSS conocidas con una abreviatura. Asi que borde inferior es bdb, borde superior es bdt. A continuación se muestra un ejemplo de tamaño de fuente, cual es fz.
Una vez que haya escrito la abreviatura, presione la tecla de acción (en mi caso, TAB) y Emmet emitirá mágicamente la abreviatura en CSS válido, colocando el cursor donde lo necesite.
Ahora que entendemos las propiedades, es hora de agregar un valor. Esto se hace escribiendo la abreviatura en combinación con el valor necesario. Por ejemplo, fz18 saldrá a tamaño de fuente: 18px;. No es necesario que escriba "px" porque Emmet lo agregará de forma predeterminada. Si un artículo no tiene una unidad (como peso de fuente), Emmet es lo suficientemente inteligente como para saber no agregar la px.
¿Qué pasa si no siempre usas píxeles? las unidades em, movimiento rápido del ojo, %, ex, y px Están todos disponibles en Emmet. Cada unidad (aunque esto puede parecer un poco extremo) también tiene una forma abreviada:
Accentsconagua
px → por defectopag → % mi → em r → movimiento rápido del ojo X → ex Para usar una unidad, simplemente agregue la abreviatura de la unidad al final de su valor. El siguiente ejemplo es definir un tamaño de fuente con em
Algunas propiedades, como margen, permitir múltiples valores. Para hacer esto con Emmet, separe cada valor con un guión (-). Eche un vistazo al siguiente ejemplo para definir cuatro valores para el cuerpo margen.
Emmet te pide que la prepares # En lugar de añadirlo a su valor. Entonces el # Va tras su propiedad, pero antes de su valor. Un número diferente de caracteres genera diferentes códigos hexadecimales. Echa un vistazo a algunos ejemplos:
# 1 → # 111111 # e0 → # e0e0e0 # fc0 → # ffcc00 Aquí hay un ejemplo de cómo definir el color del cuerpo como # 111 (c # 1):
A pesar de !importante La etiqueta no se debe usar muy a menudo, Emmet la ofrece solo en caso de que. Añadir un signo de exclamación ! a su abreviatura como tal:
Ahora que tenemos una comprensión básica de las funciones CSS de Emmet, es hora de comenzar a armarlas. De manera similar a las funciones HTML, agregará un signo más (+) para cada artículo. Recuerde, si desordena algo, siempre puede pulsar Deshacer y revisar la cadena..
Escriba todas sus propiedades y valores requeridos, separándolos con un + y luego pulsa la tecla de acción para ver el resultado..
Aquí hay un ejemplo de la definición de diferentes márgenes y rellenos para el cuerpo.
Recuerde, puede usar todas estas abreviaturas juntas o por separado. No se trata de obtener los códigos de Emmet exactamente a la derecha la primera vez, solo se trata de facilitar la escritura de su CSS. Para concluir estos geniales GIF animados, aquí hay una demostración rápida de estilo creando un div con una clase de panel.
Emmet es una herramienta poderosa. Afirmado por algunos como una herramienta de codificación de "alta velocidad", le permite pasar menos tiempo escribiendo las mismas cosas una y otra vez sin tener que crear manualmente sus propios fragmentos de código. Emmet se inspiró en los selectores de CSS y se puede utilizar en todos los editores de texto principales para adaptarse al flujo de trabajo de cualquier desarrollador.
Recuerde, cualquier herramienta nueva que agregue a su flujo de trabajo tendrá una curva de aprendizaje, pero no tome más tiempo del que necesita para descubrir cómo funciona para usted. Regularmente, visitar la documentación es un excelente repaso, y Emmet proporciona una hoja de trucos con todas las funciones posibles. Esto ha sido creado para ayudarte a pensar menos y escribir más código!
¿Cómo usas Emmet en tu flujo de trabajo? ¿Cuál es tu función CSS favorita? Háganos saber en los comentarios.!
