写点什么

使用 Restyle.js 简化 CSS 预处理

  • 2014-02-19
  • 本文字数:1306 字

    阅读完需:约 4 分钟

Andrea Giammarchi 的 restyle.js 是一个新的,基于 JavaScript 的 CSS 预处理器,能够运行在服务端(通过 Node.js)或者浏览器中。它宣称自己是“一种简化的 CSS 方法”,能够生成 CSS 规则和属性的所有前缀变化,如果合适的话,自动插入到 DOM 中。

关于 CSS 预处理器基本没有什么不足之处,但 Andrea 表示还没有哪种轻量级的预处理器能够同时适用于服务端和客户端:

在你认为“又一个 CSS 预处理器”之前,我想告诉你,我问过周围一些常见的、知名的 CSS 或者普通 Web 开发人员,似乎还没有这样的小脚本……一旦你了解它,你也许会想“怎么之前没人做这个呢?”我的想法是可能人有做了,但我不确定它能小到 0.8KB 而且同时兼容服务端和甚至 IE 6 这样的客户端……因此,我们正在谈论的是 restyle。

该库暴露了一个单独的方法 restyle(),它有两个参数。第一个参数是 JavaScript 对象,其语法接近于 CSS 和 DOM 样式编辑。示例如下:

复制代码
restyle({
'body > div.my-div': {
backgroundColor: 'goldenrod',
backgroundImage: 'url(mybg.png)'
}
});

它将生成以下 CSS:

复制代码
body > div.my-div {
background-color: goldenrod;
background-url: url(mybg.png);
}

我们也可以用不同的方式指定 JavaScript 对象,达到相同的结果:

复制代码
restyle({
'body > div.my-div': {
background: {
color: 'goldenrod',
image: 'url(mybg.png)'
}
}
});

当然,到目前为止,这没什么特别的而且也没有减少标记,即使有,也很细微。但是当你在处理更繁琐的 CSS 时,例如供应商前缀,restyle 将发挥其强大功能。第二个参数允许你指定供应商前缀,用于生成结果,示例如下:

复制代码
restyle({
'.my-div': {
transition: 'background-color 500ms ease';
backgroundColor: '#00f';
}
}, ['moz', 'webkit']);

将生成以下 CSS:

复制代码
.my-div {
-webkit-transition: background-color 500ms ease;
-moz-transition: background-color 500ms ease;
transition: background-color 500ms ease;
background-color: #00f;
}

在编写动画规则时,这就显得非常方便。少量代码就能转换成大量包含供应商前缀的规则和 CSS 属性代码,而这只需要很少的付出。在服务端,省略第二个参数将不生成前缀。而在客户端,不论当前执行代码的是哪种客户端,restyle.js 都将生成所有常见供应商前缀。

根据不同的环境,restyle() 方法将返回不同的结果。在 Node.js 中,它返回包含 CSS 结果的字符串。而在浏览器中,会将 CSS 自动插入到 DOM 中,让其立即生效,返回值是一个方便的小对象,包括属性结点(结果样式元素)、CSS(包括 CSS 结果的字符串)和一个单独的方法 remove(),该方法用于从 DOM 中删除已经插入的样式。

这个简单的示例网页,让你能够编写代码并通过restyle.js 生成结果。正如Andrea 的博客中一些评论所指出的,restyle.js 与类似的库 AbsurdJS 基于相同的思想,但后者更大且功能更全。Restyle.js 只有十分之一的大小,真的是一个轻量级,有趣的 CSS 预处理器,值得一看。你可以查看 readme 开始学习如何使用。

原文英文链接: Simplified CSS Preprocessing with restyle.js

2014-02-19 04:131632

评论

发布
暂无评论
发现更多内容

架构师训练营第五周学习总结

fenix

RxJS学习总结

真嗣

RXJS

致那些高考结束的同学们

小天同学

读书 读书感悟 高考

架构师第五周总结

suke

极客大学架构师训练营

第5周:作业一

远方

架构师训练营 第五周 个人感想

且听且吟

架构师第五周作业

suke

极客大学架构师训练营

区块链大规模应用“补位”开始了

CECBC

一致性哈希算法简单实现

Jerry Tse

源码 极客大学架构师训练营 作业 一致性哈希

再谈大型网站技术应用——上篇

Jerry Tse

网站架构 分布式系统 极客大学架构师训练营 作业

架构师训练营」第 5 周作业

edd

极客大学架构师训练营

第五周作业 - 一致性 hash 实现

netbanner

极客大学架构师训练营

技术选型:如何构建技术选型方法论

Skye

极客大学架构师训练营 技术选型

架构师训练营第五周作业

James-Pang

极客大学架构师训练营

一致性哈希算法分析与go语言实现

superman

极客大学架构师训练营 一致性Hash算法 Go 语言

week5 学习总结

任小龙

week5. 课后作业

dj_cd

LeetCode 12. Integer to Roman

liu_liu

算法 LeetCode

第五周学习总结

CP

第五周学习总结

李白

第5周作业

andy

LeetCode 3. Longest Substring Without Repeating Characters

liu_liu

算法 Leetc

架构师训练营第 05周—— 练习

李伟

一致性哈希算法&Java实现

Lane

极客大学架构师训练营

第5周-总结

Dawn

架构师训练营Week5总结

平淡人生

架构师训练营 Week5作业

平淡人生

第5周总结

andy

架构师训练营第五周总结

James-Pang

极客大学架构师训练营

架构师培训 -05 缓存、消息和负载均衡

刘敏

第5周总结

远方

使用Restyle.js简化CSS预处理_JavaScript_Andy Earnshaw_InfoQ精选文章