In this tutorial, I'm going to walk you through a tool named Myth. Myth is an alternative CSS preprocessor which, unlike Sass or LESS, doesn’t use proprietary syntax. Instead, Myth adopts “future” CSS syntax as specified in the Working Draft. Think of Myth like the Picture Fill which allows us to use the HTML5 <picture> element even though the <picture> element is still not fully supported in the browser; with Myth we can write CSS of the future, today.
“CSS the way it was imagined.
Before we can use Myth we first have to setup a couple of things. Let’s get started!
Getting Setup
Myth is a Node.js package which allows it to work on different platforms. You will therefore need to ensure that you have Node.js as well as NPM (Node Package Manager) installed in your system. To verify, launch Terminal or Command Prompt and type node -v && npm -v, as follows:
This command should return the version of Node.js and NPM as shown above, otherwise you will have to install them before proceeding further. NPM has provided a short screencast to guide you through the process. You may also follow our previous series and courses to dig into what Node.js is all about.
Installing Myth
Now, assuming you have Node.js and NPM set up, you can start installing Myth using the following command:
npm install -g myth
The -g parameter we added will install Myth library globally, which allows Myth to be accessible anywhere, within any directory on our system.
Once done, you will have access to the myth command. Running myth --version, for example, will show you the current version of Myth installed on your system.
myth command works.Myth works with any text-based file extension. Stylesheets may be set in .txt, .css, or even .myth. Here I simply use .css so I won’t have to configure my code editor in order to render the code with proper syntax-highlighting colors.
Run the following command, myth --watch build/app.css app.css to monitor changes within the stylesheet in the /build folder and compile it into a corresponding file.
We are all set–ready to use Myth!
Using Myth
Myth is essentially a CSS preprocessor which allows us to write new CSS syntax (that we might expect to be standardized in the future) compiling it into the browser-compliant CSS format of today. Myth support includes the use of CSS Variables, CSS Color Manipulation, and a couple of CSS techniques that, at the moment, are partially or are not uniformly supported such as the ::placeholder pseudo-class and calc().
Variables
The use of variables significantly helps us to maintain stylesheets, and is possibly the chief reason for why CSS preprocessors became so well-adopted in the first place. Nonetheless, variables will come to CSS as a native feature. As per the latest Working Draft, we would use double dash -- to define a variable instead of the var- prefix as stated in an earlier draft:
:root {
/** [early version and deprecated] */
var-color-primary: #000;
var-color-secondary: #fff;
/** [latest version] */
--color-primary: #000;
--color-secondary: #fff;
}The :root pseudo-class selector refers to the root element of the markup document. In the case of HTML, this will refer to the <html> element, in SVG it would be the <svg>. Since the root element is the highest level of a document, putting our variables in the :root allows them to be accessible in any style rules within the stylesheet. You may limit the scope of the variable by declaring within a more specific selector.
We use the new var() function to apply a variable in a style rule, for example:
:root {
--color-primary: #000;
--color-secondary: #fff;
}
h1,
h2,
h3 {
color: var(--color-secondary);
}
.panel {
background-color: var(--color-primary);
color: var(--color-secondary);
}This example will give us the following output (as you might have expected):
h1,
h2,
h3 {
color: #fff;
}
.panel {
background-color: #000;
color: #fff;
}Values in variables can be anything–a color, a string, a length, even a mathematical operation using the CSS calc() function. Values in the variable can also be reused or inherited in accordance with the CSS cascading rule. Below, for example, we determine the line-height value based on the preceding variable.
:root {
--font-size-base: 16px;
--line-height-base: calc(16px + 10);
}
p {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}This gives us:
p {
font-size: 16px;
line-height: 26px;
}One browser which natively supports CSS variable currently is Firefox (find the complete list on CanIUse.com).
Color Manipulation
The color manipulation function gives us the ability to change colors more more intuitively; there’s no need to memorize or juggle the color picker only to pick the right color. This is common practice with CSS preprocessors, but color() (part of the CSS Color mod Level 4) will allow us to alter colors in plain CSS. This new function works by specifying the color along with a so-called color-adjuster:
element {
background-color: color(<color> <color-adjuster>);
}Color-adjusters which Myth supports include:
lightness(), to modify the lightness of the given color.whiteness(), to modify the white intensity of the given color.blackness(), similar towhiteness(), except it modifies the black intensity.saturation(), to modify the color saturationtint(<percentage>), to produce a lighter color by mixing the given color with white.shade(<percentage>), to produce a darker color by mixing the given color with black.
The following example will lighten #ccc (dark gray) by 20%.
p {
color: color(#ccc lightness(20%));
}...which compiles into:
p {
color: rgb(51, 51, 51);
}Alternately, you may also pass the color through a variable, like so, which will give us the same output:
:root {
--color-primary: #ccc;
}
p {
color: color(var(--color-primary) lightness(20%));
}color() is a function that will be greatly helpful when used in conjunction with the CSS3 linear-gradient to determine gradient colors, for example:
.button {
background: linear-gradient(to bottom, var(--color-primary), color(var(--color-primary) shade(10%))); ;
}Font Variant
The font-variant property is something else we can use in Myth. font-variant has actually been present in CSS since CSS1 with only two accepted values, normal and small-caps. In CSS3, part of the CSS Fonts Module, the font-variant property has been extended with more accepted values as well as specific property additions such as font-variant-east-asian that will allow us to select variations of Chinese glyphs, simplified or traditional.
Let’s try turning all the letters within a heading into small capitals:
h1 {
font-variant: all-small-caps;
}Myth will compile this code into:
p {
-webkit-font-feature-settings: "smcp", "c2sc";
-moz-font-feature-settings: "smcp", "c2sc";
font-feature-settings: "smcp", "c2sc";
font-variant: all-small-caps;
}The all-small-caps value will force all the characters, including lowercase and uppercase, into small capitals. However, keep in mind that all-small-caps will only take affect in particular font families that provide small-capital versions of each glyph, such as Helvetica, Arial, and Lucida Grande. Where small caps are unsupported the glyph will return “unknown”:
Firefox is, at the moment, the only browser with decent support for the font-variant property. Many of the values, except the small-caps (present since CSS1) will fail in other browsers including Chrome and Safari. (see the complete compatibility list in CanIUse.com).
Wrapping Up
Myth also includes Autoprefixer which allows it to insert browser prefixes for particular properties. Head over to the Github repo to find more CSS features it supports. There is also a plugin for Grunt and Gulp to cater to your workflow.
Finally, Myth is a CSS preprocessor for anyone who is living on the bleeding-edge of the web. But, whether you decide to use Myth as your regular CSS tool or not, we can conclude that it demonstrates a handful of new exciting CSS features that will make the web a much better place in the future.
Further References
