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?

Espacio de trabajo inspirador: 60 impresionantes configuraciones

Pasamos la mayor parte del día frente a nuestras computadoras. Aquí es donde se realizan todos los trabajos, se resuelven los correos electrónicos y se establecen relaciones sociales. La verdad es que la computadora se ha convertido en un elemento básico para casi todos los aspectos del estilo de vida moderno, y ahora las personas incluso están adoptando múltiples dispositivos para una mayor competencia laboral.Despu

(Consejos de tecnología y diseño)

La nueva característica de estabilización de Google Photos arreglará todos tus videos inestables

Cualquiera que haya intentado capturar un video usando su teléfono inteligente ha experimentado el efecto de "cámara inestable" . Sin embargo, para los usuarios de teléfonos inteligentes Android, ahora existe la oportunidad de eliminar el efecto de "cámara inestable" a través de la nueva característica de Video Sabilization de Google Photos.Actua

(Consejos de tecnología y diseño)