CSS3 introdujo una gran cantidad de características nuevas como los degradados, las sombras, los bordes redondeados y las animaciones. Aún hay características que todavía no se han podido implementar debido a la falta de soporte del navegador, como las variables CSS y funciones como calc(). Pero si a ti lo que te puede es el ansia y quieres experimentar el futuro, debes echar un vistazo a Myth.
Myth, a diferencia de otros preprocesadores que cuentan con su propia sintaxis, utiliza la misma sintaxis que la especificación estándar. Puede utilizar variables, realizar operaciones matemáticas o de color, y escribir nuevas propiedades CSS en su versión oficial. Su objetivo es permitir que los desarrolladores escriban CSS puro, al mismo tiempo que puedan utilizar la sintaxis estándar del futuro, pero ahora.
Para comenzar, necesitamos instalar el binario de Myth para poder compilarlo al estándar CSS actual. Actualmente no existe un GUI como Codekit o Koala que soporte Myth, por lo que esta es la única forma de compilar Myth en un formato CSS compatible con el navegador.
En el Terminal, escribe el siguiente comando:
npm install -g myth
Después puedes utilizar este comando que puedes ver más abajo, por ejemplo, para compilar source.css en output.css.
myth source.css output.css
O escribir esto para monitorear el source.css y compilarlo en output.css para cada cambio que hagas.
myth --watch source.css output.css
Como puedes ver, Myth no tiene una extensión propia como puedes ver más arriba.
Escribir CSS con Myth
Myth tampoco cuenta con funciones y reglas propias como los otros procesadores de CSS, por lo que deberías poder acostumbrarte a Myth casi de inmediato. Es como si se tratase de CSS plano.
Variables
Comencemos con las variables. En CSS, se declara una variable así:
:root { var-length: 10px; var-color: #000; } .class { background-color: var(color); width: var(length); }
Myth compila este código en un formato compatible con el navegador:
.class { background-color: #000; width: 20px; }
Operaciones matemáticas
Como he mencionado antes, también podemos realizar operaciones matemáticas con la nueva función calc() de CSS3.
:root { var-length: 10px; var-color: #000; } .class { background-color: var(color); width: calc(var(length) / 2); }
Myth compila el anterior cçodigo en:
.class { background-color: #000; width: 10px; }
Ajustes de color
Myth también soporta algunas operaciones con los colores al igual que LESS o Sass. A continuación puedes ver un ejemplo de ello: 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(black) lightness(+ 80%)); border: var(border-width) solid color(var(white) lightness(- 50%)); width: calc(var(length) / 2); }
Este código produce:
.class { background-color: rgb(204, 204, 204); border: 2px solid rgb(128, 128, 128); width: 10px; }