CSS预处理器：Myth
jopen
9年前
Myth 是一个预处理器，可以让你写纯CSS，而无需担心速度慢的浏览器支持。它就是一个 CSS polyfill。 Myth让你可以编写纯CSS但仍然可以利用LESS和Sass这类工具的优点，仍然可以使用变量和数学函数，就像你在预处理器中使用的一样。
示例
一个例子是解释它的最简单的方法。如果你写的符合规范的CSS：
:root { --green: #a6c776; } @custom-media --narrow-window screen and (max-width: 30em);@media (--narrow-window) { html { font-size: 1.2rem; } }a { color: var(--green); font-variant: all-small-caps; transition: color 1s; }a:hover { color: color(var(--green) shade(20%)); } ::placeholder { opacity: .4; transition: opacity 1s; }:focus::placeholder { opacity: .2; }... Myth为你将其改造成浏览器兼容的CSS：:
@media screen and (max-width: 30em) { html { font-size: 1.2rem; } }a { color: #a6c776; -webkit-font-feature-settings: "smcp", "c2sc"; -moz-font-feature-settings: "smcp", "c2sc"; font-feature-settings: "smcp", "c2sc"; font-variant: all-small-caps; -webkit-transition: color 1s; transition: color 1s; }a:hover { color: rgb(133, 159, 94); } ::-webkit-input-placeholder { opacity: .4; -webkit-transition: opacity 1s; transition: opacity 1s; } ::-moz-placeholder { opacity: .4; transition: opacity 1s; } :-ms-input-placeholder { opacity: .4; transition: opacity 1s; } ::placeholder { opacity: .4; -webkit-transition: opacity 1s; transition: opacity 1s; }:focus::-webkit-input-placeholder { opacity: .2; }:focus::-moz-placeholder { opacity: .2; }:focus:-ms-input-placeholder { opacity: .2; }:focus::placeholder { opacity: .2; }Features
Variables
Using the same syntax as the CSS spec. Just like future CSS, but without the cascade. Thanks to rework-vars.
:root { --purple: #847AD1; }a { color: var(--purple); }Math
Using the same syntax as the CSS spec. Just like future CSS, but without runtime interpolation. Thanks to rework-calc.
pre { margin: calc(50px * 2); }Custom media queries
Using the same syntax as the CSS spec. Thanks to rework-custom-media.
@custom-media --narrow-window (max-width: 30em);@media (--narrow-window) { /* narrow window styles */ }@media (--narrow-window) and (script) { /* special styles for when script is allowed */ }Color Manipulation
Using the same syntax as the CSS spec. Thanks to rework-color-function.
a { color: #847AD1; }a:hover { color: color(#847AD1 tint(20%)); }No Prefixes
The prefixes from the most-common and most-recent browsers are supported, so you never need to worry about what the current browser support landscape is. Big thanks to autoprefixer!
.button { background: linear-gradient(to bottom, black, white); transition: transform .25s; }