Skip to content

Instantly share code, notes, and snippets.

@MoOx
Last active March 28, 2016 07:32
Show Gist options
  • Save MoOx/091143e99c6c87fa6d13 to your computer and use it in GitHub Desktop.
Save MoOx/091143e99c6c87fa6d13 to your computer and use it in GitHub Desktop.
myth 1.1.1 vs cssnext 0.3.1
a { font-size: calc(calc(calc(1rem * 0.75) * 1.5) - 1px); }
a { color: color(rebeccapurple a(-10%)); }
a { color: hwb(0, 10%, 20%); }
a { color: color(color(red a(+10%)));}
a { color: color(color(rebeccapurple a(-10%)) a(-10%)); }
:root { --not-a-color: 4px }
a { color: var(--not-a-color, green) }
/*
@todo before cssnext v1.0
https://github.com/postcss/postcss-import/issues/2
https://github.com/postcss/postcss-custom-properties/issues/4
*/
/* http://putaindecode.github.io/cssnext-playground/ */
/* better, & works today in most browsers */
a { font-size: calc(1.125rem - 1px); }
/* resolved */
a { color: rgba(102, 51, 153, 0.9); }
/* resolved */
a { color: rgb(204, 26, 26); }
/* resolved */
a { color: rgba(102, 51, 153, 0.81); }
/* fallback ok! */
a { color: green; color: 4px }
/* http://jonathankingston.github.io/mythhub/ */
/* unresolved */
a {
font-size: calc(calc(calc(1rem * 0.75) * 1.5) - 1px);
}
/* unresolved */
a {
color: color(rebeccapurple a(-10%));
}
/* unresolved */
a {
color: hwb(0, 10%, 20%);
}
/* wat ? */
a {
color: rgb(0, 0, 0);
}
/* syntax error for a { color: color(color(rebeccapurple a(-10%)) a(-10%)); } */
/* not a valid color, no fallback :/ */
a {
color: 4px;
}
@qiansen1386
Copy link

So there is a clear win for cssnext?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment