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.
Read Also: 5 Reasons Why CSS Could Be The Hardest Language Of All
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; }
Final Thought
I love the idea of Myth. With it, we can write pure CSS of the future today without worrying about browser support. And since it uses the standard syntax, later when all browsers have implemented it (as the standard), we won’t need to rewrite all the code. I think I’m going to start using it in every one of my future projects. What about you? Will you adopt the same?
via hongkiat.com http://ift.tt/1en93Wp