How to use Myth

Most of us use some form of a CSS pre processor now, they give us the freedom and advantages that CSS still doesn’t have implemented, like variables.

The problem with these pre processors is that they use a completely different syntax than CSS itself making us learn two syntaxes. What if we could have a pre processor that had all the advantages we are used to and still keep the CSS syntax ?

Myth allows you write CSS syntax so that you don’t have to remember two syntaxes and so that when features like variables are supported by all browsers your code will be 100% valid and you won’t have to rewrite anything, you can think of Myth as a CSS polyfill.

Installing

The installation process will be very familiar to you, you need NodeJS and NPM installed and if you don’t have these you need to head over to the NodeJS website and click install, the website will automatically download the most appropriate version for your OS.

When this is installed on your machine you should go to your terminal and run :

npm install -g myth

That’s all, no configuration needed, with one simple command we have Myth installed.

Syntax

As I said before, the syntax is the same as CSS and future specs of CSS so this means that when you learn this syntax you are actually learning future and cutting edge CSS that may not be available today in all browsers.

Variables

We all know about variables in preprocessors but the fact is that now we also have variables in CSS, the problem is that they’re only supported by Firefox Nightly and Myth fixes this.

Using the var() function we can create variables that Myth will later convert into cross browser readable CSS:

:root {
var-light-blue: #5DA9CF;
var-paddding: 10px;
}
div {
padding: var(padding);
color: var(light-blue);
}

If you are familiar with CSS Variables you can see that this is the actual syntax for them, you create them on :root so that they are used on all the document and then call them by using the var() function with the name of the variable inside.

When Myth processes your code you will get something like this:

:root {
var-light-blue: #5DA9CF;
var-paddding: 10px;
}
div {
padding: 10px;
color: #5DA9CF;
}

When it comes to these variables we can also call them inside an element like this:

.element {
var-padding: 20px;
}
.element .sub-elemnt {
padding: var(padding);
}

By creating something like this the variable will change its value only on that element and its children.

.element {
var-padding: 20px;
}
.element .sub-elemnt {
padding: 20px;
}

You still created valid CSS but Myth transformed your valid CSS into one that all the browsers will understand and run.

Math

We also have a function in CSS that will give us the power of math, you can read more about it here but the main problem with the calc function isn’t its browser support but the fact that this function will only be really useful once we have variables; so with Myth, we can finally use it:

div.main {
padding: calc(var(padding) * 2);
}

As you can see both the cal() and var() functions are written using CSS syntax and when Myth processes this line you will just get a CSS line that has:

div.main {
padding: 20px;
}

Behind the scenes Myth does all the calculations so that all the browser sees is a simple pixel value that it can read.

Color Manipulation

Another very useful thing we already have in preprocessors but not in CSS is color manipulation, where we can get a variable or color code and tint it or saturate it, all using a single function. All we have at the moment is a draft by Tab Atkins, even though this draft is a good start the fact that it’s not yet implement by any browser makes it impossible to use so far, unless you are using Myth of course:

.btn {
color: var(light-blue);
}
.btn:hover {
color: color(var(light-blue) shade(10%));
}

As you can see I use the color function to shade the light-blue variable by 10% , shading means you add black to the color, making it a bit darker. When processing this in the background Myth turns the result of that function into a readable CSS for all browsers:

.btn:hover {
color: rgb(68,144,182);
}

No Prefixes

This one is pretty self explanatory, just like in all preprocessors we also have the ability to write the latest CSS technologies without worrying about browser prefixes, Myth will take care of that for us when it processes our file.

This means that when going about your CSS, something like this:

.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

Doesn’t need to happen anymore , Myth allows you to focus on what you want to create eliminating everything that is a browser prefix from your daily CSS. Using Myth all you would need to type is:

.box {
box-sizing: border-box;
}

And the -moz- prefix would be added in the background without you having to worry about it.

Final thoughts

As you can see we don’t have mixins in Myth yet, and if you are used to other preprocessors you may use them on a daily basis, but this is mainly because mixins are farther into the future of CSS than other features that Myth carries. When we have a draft and syntax for them in CSS we will probably see them added to Myth.

The beauty of Myth is that you have the power of a preprocessor, but you’re still writing CSS.

Just like their website says , Myth is let’s you write “CSS the way it was imagined” and this will give you a future proof CSS file.