CSS預處理器：Myth

jopen 10年前發布 | 14K 次閱讀 Myth CSS 前端技術

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;
}

And more...

項目主頁：http://www.baiduhome.net/lib/view/home/1416544800617

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！