经验分享:使用 Restyle.js 简化 CSS 预处理
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()方法将返回不同的结果。在Node.js中,它返回包含CSS结果的字符串。而在浏览器中,会将CSS自动插入 到DOM中,让其立即生效,返回值是一个方便的小对象,包括属性结点(结果样式元素)、CSS(包括CSS结果的字符串)和一个单独的方法 remove(),该方法用于从DOM中删除已经插入的样式。
这个简单的示例网页,让你能够编写代码并通过restyle.js生成结果。正如Andrea的博客中一些评论所指出的,restyle.js与类似的库AbsurdJS基于相同的思想,但后者更大且功能更全。Restyle.js只有十分之一的大小,真的是一个轻量级,有趣的CSS预处理器,值得一看。你可以查看readme开始学习如何使用。
关于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)'
- }
- });
- body > div.my-div {
- background-color: goldenrod;
- background-url: url(mybg.png);
- }
- restyle({
- 'body > div.my-div': {
- background: {
- color: 'goldenrod',
- image: 'url(mybg.png)'
- }
- }
- });
- restyle({
- '.my-div': {
- transition: 'background-color 500ms ease';
- backgroundColor: '#00f';
- }
- }, ['moz', 'webkit']);
- .my-div {
- -webkit-transition: background-color 500ms ease;
- -moz-transition: background-color 500ms ease;
- transition: background-color 500ms ease;
- background-color: #00f;
- }
根据不同的环境,restyle()方法将返回不同的结果。在Node.js中,它返回包含CSS结果的字符串。而在浏览器中,会将CSS自动插入 到DOM中,让其立即生效,返回值是一个方便的小对象,包括属性结点(结果样式元素)、CSS(包括CSS结果的字符串)和一个单独的方法 remove(),该方法用于从DOM中删除已经插入的样式。
这个简单的示例网页,让你能够编写代码并通过restyle.js生成结果。正如Andrea的博客中一些评论所指出的,restyle.js与类似的库AbsurdJS基于相同的思想,但后者更大且功能更全。Restyle.js只有十分之一的大小,真的是一个轻量级,有趣的CSS预处理器,值得一看。你可以查看readme开始学习如何使用。
【经验分享:使用 Restyle.js 简化 CSS 预处理】相关文章
1. 经验分享:使用 Restyle.js 简化 CSS 预处理
10. Myth – 支持变量和数学函数的 CSS 预处理器
本文来源:https://www.51html5.com/a1046.html
上一篇:一款非常棒的纯CSS3 3D菜单演示及制作教程
下一篇:我调过的最难调的Bug
﹝经验分享:使用 Restyle.js 简化 CSS 预处理﹞相关内容
- 支持变量和数学函数的 CSS 预处理器
- LESS-Middleware:Node.js 和 LESS 的完美搭配
- 分享:你必须知道的H5加速器九大常识!
- 内置常用预处理器的静态 Web 服务器
- jQuery 2013年回顾:使用率继续增长
- 微软:使用IE 10和HTML5可提高30%的加载速度
- jQuery 2013年回顾:使用率继续增长
- 开发者分享开发HTML5跨平台游戏经验及注意要点
- 《Animory》开发者分享HTML5手机游戏制作经验
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果