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 artilugios para ayudarte a combatir el estrés

La vida moderna puede estar ocupada, exigente y siempre encendida. Si bien no somos capaces de controlar los factores externos inductores de estrés de nuestro entorno, podemos administrar mejor cómo reaccionamos ante ellos .Algunas veces es tan simple como aclarar tu cabeza y tomar respiraciones largas y lentas mientras te recoges.

(Consejos de tecnología y diseño)

Dynamic Lock bloqueará automáticamente su PC cuando esté lejos

Con Windows 10, la cámara incorporada de su computadora portátil se puede usar para desbloquear el dispositivo gracias a Windows Hello . Pronto, dicha cámara también se puede utilizar para bloquear automáticamente su PC, ya que Windows Insider Build 15002 viene con una función llamada Dynamic Lock .Menci

(Consejos de tecnología y diseño)