Comenzando con Myth, un preprocesador que debes conocer

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;
}