Mito - Escribir CSS del futuro

CSS ha introducido una serie de características nuevas como CSS Gradients, Shadows, Border Radius y Animation que se pueden lograr puramente con CSS. También hay varias características que aún no se han implementado debido a la falta de soporte del navegador para las variables de CSS y las funciones de CSS calc() . Pero si realmente no puedes esperar por el futuro, veamos Mito.

El mito, a diferencia de otros preprocesadores que inventan su propia sintaxis, usa la misma sintaxis que la especificación estándar . Puede usar variables, realizar operaciones matemáticas o de color y escribir nuevas propiedades de CSS en su forma oficial. Su objetivo es permitir a los desarrolladores escribir CSS puro, mientras que también puede utilizar la sintaxis estándar en el futuro, en este momento.

Empezando

Para comenzar, necesitamos instalar Myth binary para poder compilarlo al estándar CSS actual. No existe una aplicación de GUI como Codekit o Koala que admita Myth en el momento de la escritura, por lo que esta es la única forma de compilar Myth en un formato CSS compatible con el navegador .

En Terminal, escriba el siguiente comando:

 npm install -g mito 

A continuación, puede usar este comando a continuación, por ejemplo, para compilar source.css en output.css .

 mito source.css output.css 

O bien, tipee esto para monitorear source.css y compilarlo en output.css para cada cambio.

 mito --watch source.css output.css 

El mito no introduce una nueva extensión. Funciona con .css como se muestra arriba.

Escribir CSS con Mito

El mito tampoco introduce funciones y reglas patentadas como los otros preprocesadores CSS, por lo que deberías poder acostumbrarte a Myth casi de inmediato. Es como CSS simple.

Variables

Comencemos con Variables. En CSS, se declara una variable, así:

 : root {var-length: 10px; var-color: # 000; } .class {background-color: var (color); ancho: var (longitud); } 

Myth compila este código en un formato compatible con el navegador:

 .class {background-color: # 000; ancho: 20px; } 

Puede consultar nuestro artículo anterior sobre el uso de variables CSS para más detalles.

Operaciones matemáticas

Como se mencionó, también podemos realizar operaciones matemáticas con la nueva función CSS3 calc() . También hemos cubierto esta función en nuestro artículo anterior: Uso de la función de Calc CSS3.

Extendamos nuestro primer ejemplo con esto:

 : root {var-length: 10px; var-color: # 000; } .class {background-color: var (color); ancho: calc (var (longitud) / 2); } 

Myth compila los códigos anteriores en:

 .class {background-color: # 000; ancho: 10px; } 

Ajustes de color

Myth también admite algunas operaciones de color o ajustes como en LESS o Sass. Se propone incluir una nueva función estándar en la especificación CSS color(), que incluye un conjunto de funciones de ajuste de color como tint(), shade() y blend() solo por nombrar algunas.

A continuación se muestra un ejemplo: aumentamos la luminosidad del color de fondo en un 80% y disminuimos el color del borde en un 50% .

 : root {var-length: 20px; var-black: # 000; var-white: #fff; } .class {background-color: color (var (negro) ligereza (+ 80%)); borde: color sólido var (ancho del borde) (ligereza var (blanco) (- 50%)); ancho: calc (var (longitud) / 2); } 

Ese código producirá:

 .class {background-color: rgb (204, 204, 204); borde: 2px sólido rgb (128, 128, 128); ancho: 10px; } 

Autoprefixer

Myth también agregará automáticamente el prefijo del proveedor a las propiedades de CSS. Simplemente podemos escribir, por ejemplo, CSS Box Shadow, de esta manera:

 .class {box-shadow: 2px 1px 0px var (negro); } 

El resultado es:

 .class {-webkit-box-shadow: 2px 1px 0px # 000; caja-sombra: 2px 1px 0px # 000; } 

Pensamiento final

Me encanta la idea de Myth. Con él, podemos escribir CSS puro del futuro hoy sin preocuparnos por el soporte del navegador. Y dado que usa la sintaxis estándar, más adelante cuando todos los navegadores lo hayan implementado (como el estándar), no necesitaremos reescribir todo el código. Creo que voy a comenzar a utilizarlo en cada uno de mis proyectos futuros. ¿Que pasa contigo? ¿Adoptarás lo mismo?

20 deliciosas animaciones de menú de hamburguesas

Un menú de hamburguesas activa principalmente una navegación con cajones deslizantes que contiene enlaces a páginas en todo el sitio web . Los menús de navegación de cajones deslizantes son ideales para un diseño receptivo, pero también pueden ser difíciles de implementar. Si estás buscando nuevas formas de animar esas tres líneas en una ordenada X (que indica cerrar), echa un vistazo a esta vitrina de fantásticas animaciones de menú de hamburguesas CSS .Menú de ham

(Consejos de tecnología y diseño)

Las pestañas de Snooze del piloto de prueba de Firefox pueden ayudarte a eliminar las distracciones

¿Alguna vez te has topado con una página web que tiene un artículo interesante pero no puedes leerlo en este momento porque estás inmerso en el trabajo? Bueno, si eres un usuario del navegador Firefox, puedes optar por "posponer" esa página para leerla más tarde, ya que Firefox ha introducido una nueva función llamada SnoozeTabs .Actual

(Consejos de tecnología y diseño)