CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 经验分享:使用 Restyle.js 简化 CSS 预处理

经验分享:使用 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样式编辑。示例如下:


  1. restyle({

  2.     'body > div.my-div': {

  3.         backgroundColor: 'goldenrod',

  4.         backgroundImage: 'url(mybg.png)'

  5.     }

  6. });
复制代码它将生成以下CSS:


  1. body > div.my-div {

  2.     background-color: goldenrod;

  3.     background-url: url(mybg.png);

  4. }
复制代码我们也可以用不同的方式指定JavaScript对象,达到相同的结果:


  1. restyle({

  2.     'body > div.my-div': {

  3.         background: {

  4.             color: 'goldenrod',

  5.             image: 'url(mybg.png)'

  6.         }

  7.     }

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


  1. restyle({

  2.     '.my-div': {

  3.         transition: 'background-color 500ms ease';

  4.         backgroundColor: '#00f';

  5.     }

  6. }, ['moz', 'webkit']);
复制代码      将生成以下CSS:


  1. .my-div {

  2.     -webkit-transition: background-color 500ms ease;

  3.     -moz-transition: background-color 500ms ease;

  4.     transition: background-color 500ms ease;

  5.     background-color: #00f;

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


  根据不同的环境,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 预处理

2. Less.js 2.4.0 发布,CSS 预处理器

3. HTML5游戏开发与货币化经验分享

4. HTML5游戏开发与货币化经验分享

5. AppCan2.0跨平台移动应用开发经验分享

6. HTML5中对style属性的解释与规定

7. HTML5 对各个标签的定义与规定:style

8. 超实用!可视化CSS3动画生成神器Stylie

9. jdists(<>) 前端代码块预处理工具

10. Myth – 支持变量和数学函数的 CSS 预处理器

本文来源:https://www.51html5.com/a1046.html

点击展开全部

﹝经验分享:使用 Restyle.js 简化 CSS 预处理﹞相关内容

「经验分享:使用 Restyle.js 简化 CSS 预处理」相关专题

其它栏目

也许您还喜欢