Myth:编写纯CSS而不用担心浏览器加载缓慢

myth

CSS 如你所愿。

Myth是一款预处理器,如同CSS的填充剂,帮你编写纯净CSS的同时,无需担心老旧浏览器兼容或者其他规范支持问题。

安装

用法

共享资源

为什么要用Myth?

Myth能让你在书写纯净CSS的同时,还能享受LESS/Sass级别的待遇。你仍然像使用预处理器一样使用变量和数学函数,它填补了CSS未来规范的空缺。

CSS的某些功能使用时需要进行运算,这是Myth或者预处理器无法控制的,但Myth能帮你写出未来版本的CSS语法,也就是说,对以后的编译器版本可用。当浏览器终于更新到支持那些CSS功能时,你不需要再去重写代码,把文件直接级联就行!

输入不经处理的CSS意味着你可以用Myth来重处理其他任意的CSS(或其他预处理输出器),只需添加你所需支持的浏览器,无需任何重写即可生成语法完全不同的代码。

Myth使用Rework搭建,速度极快,支持命令行与JS API。

案例

多说无凭,有例为证。如果你按照规范写下了以下CSS:

… Myth能帮你转换成浏览器支持的CSS:

特色

变量

语法与CSS规范相同。就像未来的CSS,但无需级联,感谢rework-vars支持。

数学

语法与CSS规范相同。就像未来的CSS,但省略了插值运算时间,感谢rework-calc支持。

自定义媒体查询

语法与CSS规范相同,感谢rework-custom-media支持。

色彩控制

语法与CSS规范相同,感谢rework-color-function支持。

无需前缀

最常用以及最新版浏览器的前缀都可以支持,所以你再也不用担心现有的浏览器该支持什么样的界面尺寸了。感谢autoprefixer支持!

以及其他……

API

命令行

Node.js

你也可以直接使用Rework插件:

可选项:

关键词 类型 描述
browsers Array 支持的浏览器版本数组列表。
compress Boolean CSS输出时是否压缩
features Object 无效功能字典。所有功能默认开启,可用功能有:calc, color, customMedia, fontVariant, hexAlpha, import, prefixes, rebeccapurple, variables.
preserve Boolean 输出时是否保留变量
source String CSS源文件的完整路径,如果你想要Myth把CSS中所有@import规则串联起来,请务必使用它。
sourcemap Boolean 是否嵌入源地图
variables Object 使用CSS变量字典

License

The MIT License (MIT)

官方网站:http://myth.io/
开源地址:https://github.com/segmentio/myth

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

2 2 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer