Skip to main content

Introduction to Myth – CSS Preprocessor

Let’s start with clearing your WHY

Okay, most of the developer use some form of CSS preprocessor to code faster, lighter and DRYer CSS but the question is why should you add a bit of complexity or variety of syntaxes to your existing code? So, let me clear your WHY. Unlike other preprocessors that come with quite a bit of different syntax than CSS, Myth – CSS preprocessor allows us to write syntax that is quite familiar to the actual CSS syntax and uses the same syntax as the standard spec.

As a result the features like variables and math operations are supported by all browsers and eventually you have zero need to rewrite your code. In simple words it works as a CSS polyfill that offers you to write future ready CSS syntax without having to wait for web browser to support it.

Installing

To get started right away you need to install NodeJS and NPM. Download the latest version from NodeJS and install it. After that head over to your terminal and run the following command:


npm install -g myth

Syntax

As we discussed above, no need to deal with any new syntax because it works with .css and does not introduce any new extension.

Getting started with Variables

Variables are supported in preprocessors as well as by Firefox Nightly (Developer edition) but not by all the browsers. Myth has solution to this problem and it uses the CSS custom properties notation to their variables.

Using the var() function we can create variables as:


:root {
   var-color: #333;
   var-padding: 20px;
}
div{
   background: var(color);
   padding: var(padding);
}

Here we created our variables on root by specifying it with keyword var so it can be used on the entire document and then whenever we need to use that code we just have to call our variable using var() function with the name of the variable inside of it.

Myth compiles this code into browser-compliant format as:


:root {
   var-color: #333;
   var-padding: 20px;
}
div{
   background: #333;
   padding: 20px;
}

Math situation

We can also perform math operations with the help of new CSS3 calc() function. So let’s get into the math situation.


div {
   width: calc(100px - 25px);
   width: calc(100% - 25px);
}

And it will be compiled into CSS as:


div {
   width: 75px;
   width: calc(100% - 15px);
}

Color manipulation

Unfortunately, we don’t have this feature in CSS, but preprocessors do support color manipulation where we can get a tint or saturated color of our variable color code using color() function.


a {
   color: var(--green);
}
a:hover {
   color: color(var(--green) shade(20%));
}

Here we are adding a black to the color green that will eventually make it darker and our CSS should resemble the following:


a {
   color: #847AD1;
}
a:hover {
   color: rgb(133, 159, 94);
}

No prefixes

When it comes to modern preprocessors feature like No prefixes is must. Myth has ability to write the latest CSS without worrying about browser prefixes. So all you need to type while using myth is:


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

Instead of


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

Custom media queries

How one can ignore media queries in this digital web. You can get the full support of media queries with myth as:


@custom-media --narrow-window screen and (max-width: 42em);

@media (--narrow-window) {
  html {
    font-size: 1rem;
  }
}

CSS should resemble the following:


@media screen and (max-width: 42em) {
  html {
    font-size: 1rem;
  }
}

Resources

Final thoughts

That is all for the myth as we discussed at start up although it doesn’t have mixins yet, but writing CSS can be much more fun and efficient when you have a CSS preprocessor like myth. I hope you found this useful, send your feedback in the comment section on what you think about myth.