Myth – Writing CSS of the Future

CSS has introduced a slew of new features such as CSS Gradients, Shadows, Border Radius, and Animation that can all be achieved purely with CSS. There are also several features that have yet to be implemented due tolack of browser support for CSS variables and CSS `calc()` functions. But if you can’t really wait for the future, let’s check out Myth.

Myth, unlike other pre-processors that invent its own syntax, uses the same syntax as the standard spec. You can use variables, perform mathematical or color operations, and write new CSS properties in its official form. Its goal is to allow developers to write pure CSS, while also be able to utilize future-standard syntax, right now.

Getting Started

To get started, we need to install Myth binary to be able to compile it to the current CSS standard. There isn’t GUI application like Codekit or Koala that supports Myth at the time of writing, so this is the only way to compile Myth into browser-compliant CSS format.

In Terminal, type the following command:

npm install -g myth

You can then use this command below, for instance, to compile source.css into output.css.

myth source.css output.css

Or, type this to monitor the source.css and compile it to output.css for every change.

myth --watch source.css output.css

Myth does not introduce a new extension. It works with .css as shown above.

Writing CSS with Myth

Myth also does not introduce proprietary functions and rules like the other CSS Pre-processors, so you should be able to get used to Myth almost immediately. It is like plain CSS.

Variables

Let’s start with Variables. In CSS, a variable is declared, like so:

:root {
var-length: 10px;
var-color: #000;
}
.class {
background-color: var(color);
width: var(length);
}

Myth compiles this code into browser-compliant format:

.class {
background-color: #000;
width: 20px;
}

You can refer to our previous article about Using CSS Variables for more details.

Math Operations

As mentioned, we can also perform mathematical operations with the new CSS3 calc() function. We have also covered this function in our previous article: Using CSS3 Calc Function.

Let’s extend our first example with it:

:root {
var-length: 10px;
var-color: #000;
}
.class {
background-color: var(color);
width: calc(var(length) / 2);
}

Myth compiles the above codes into:

.class {
background-color: #000;
width: 10px;
}

Color Adjustments

Myth also supports some color operations or adjustments like in LESS or Sass. A new standard function for it is proposed to be included in CSS spec named color() — including a set of color-adjusting functions such as tint(), shade(), and blend() just to name a few.

Below is one example: we increase the background color’s lightness by 80% and decrease the border color by 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);
}

That code will produce:

.class {
	background-color: rgb(204, 204, 204);
	border: 2px solid rgb(128, 128, 128);
	width: 10px;
}

Autoprefixer

Myth will also automatically add vendor prefix to CSS properties. We can simply write, for instance, CSS Box Shadow, this way:

.class {
box-shadow: 2px 1px 0px var(black);
}

The output is:

.class {
-webkit-box-shadow: 2px 1px 0px #000;
box-shadow: 2px 1px 0px #000;
}