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?

Autónomo vs. En la casa: ¿Qué produce a los mejores diseñadores?

Una de mis cosas favoritas, además del diseño, la comida y la escritura sobre diseño y comida, es perturbar a mis colegas diseñadores con preguntas extrañas. Ustedes deberían intentarlo alguna vez; es realmente divertido. De todos modos, hoy estaba pensando en la dinámica de un entorno de trabajo interno, y cómo se compara con el trabajo independiente . He hec

(Consejos de tecnología y diseño)

8 herramientas para personalizar tu Windows 10

Windows 10 ofrece muchas opciones de personalización, pero son difíciles de acceder o requieren retoques con el registro de Windows . Afortunadamente, hay muchas herramientas de terceros que pueden facilitar la personalización de Windows 10 con solo unos pocos clics.En la publicación de hoy, enumeraremos 8 herramientas que puede usar para personalizar Windows 10 de acuerdo con su gusto . Si

(Consejos de tecnología y diseño)