经验分享:使用 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

2

3

4

5

6

restyle({

    ‘body > div.my-div‘: {

        backgroundColor: ‘goldenrod‘,

        backgroundImage: ‘url(mybg.png)‘

    }

});

  它将生成以下CSS:

?





1

2

3

4

body > div.my-div {

    background-color: goldenrod;

    background-url: url(mybg.png);

}

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

?





1

2

3

4

5

6

7

8

restyle({

    ‘body > div.my-div‘: {

        background: {

            color: ‘goldenrod‘,

            image: ‘url(mybg.png)‘

        }

    }

});

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

?





1

2

3

4

5

6

restyle({

    ‘.my-div‘: {

        transition: ‘background-color 500ms ease‘;

        backgroundColor: ‘#00f‘;

    }

}, [‘moz‘, ‘webkit‘]);

  将生成以下CSS:

?





1

2

3

4

5

6

.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

  译文来自:http://www.infoq.com/cn/news/2014/02/restylejs  

时间: 2024-10-15 03:12:48

经验分享:使用 Restyle.js 简化 CSS 预处理的相关文章

html css 前端基础 学习方法及经验分享

前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于基础语法 对于基础语法,此处不做讲解,有需要的同学可以在w3cschool.w3school.慕课网等等进行学习.如果是刚开始接触前端,不建议通过书籍进行学习,第一是因为书籍里面有的知识可能过于陈旧,已经在新版本中被废弃,第二是因为书籍里面知识体系十分全面,很多知识可能比较难理解,且平时做项目会很少

CSS浮动(float)属性学习经验分享

作为一名前端开发的初学者,CSS的布局定位无疑成为了一个难点,这两天通过看一些博客的技术分享和自己的反复实践,大概领悟到了一些float的“门道”. 下面就通过一些例子来归纳总结一下我所学到的浮动特性: (一)浮动元素对其兄弟元素是标准流元素的影响: 现在假定HTML文档中从上到下有3个块元素A.B.C 1.现设定A.C为标准流中的元素,B设为float:left (注:为了更直观地显示,设B的透明度为0.5,B是在C上方的) 由此可见:将B设为浮动元素后,B脱离了标准文档流,浮于其上方,因此他

JS控制css float属性的用法经验总结

JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等. 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可.如:obj.style.marginTop,obj.style.borderLeftWidth,obj.

怎样使用自定义标签简化 js、css 引入?

国庆将至,工作兴致全无,来总结点项目里平时不起眼干货. 前端引入 js .css 一般是这样: <script type="text/javascript" src="webContent 相对路径"></script> <link type="text/css" href="webContent 相对路径" rel="stylesheet"/> 简化后的 js .css

公司实习经验分享

近期在一家创业公司做技术 .由于是从一開始跟着做技术,所以到如今给了个技术总监的title. 公司的全部程序都是由我一个人来维护的.公司是做电商创业. pc端从前端html到css 到js到smarty模板 到php到数据库都是一手调较. wap端从为了參加百度推广的一千元优惠活动进行了优化才在最后几分钟成功评上三颗星. app端android也是我一手改动.近期可能ios端也要我来做了.. 经验分享: 原来认为创业真是简单. 尤其是技术型创业.可是经历过这次就不一样了.原来做站点是要申请icp

项目优化经验分享(一)数据自己主动匹配

从今天開始.我将和大家分享一下近期经手项目的优化经验.今天我们分享的内容是:自己主动匹配! 引言: 输入框数据自己主动匹配大家应该非常熟悉,当我们在使用百度或google时,在搜索框中输入数据,就会得到对应提示,这给我们的搜索带来了非常大的方便,假如说我要搜索火车票订票官网.可是我不记得是全称是什么,12593?还是12596?,其实.我在搜索框中输入火车站就能够看到想要找的站点全称了,如图: 如此有用的功能,当然要拿来用到我们自己的系统里,来看看怎么实现吧! 思路: 1.引用jquery-ea

近期Responsive web design项目经验分享-高分辨率图片处理篇

在高分辨率的情况下  商品的图片难免会失真 怎样才能让商品的图片在高分辨率的情况下 效果不失真 提供用户更好的体验呢 我发现了一个解决方案 不知道是不是你想要的 先上图片对比下效果 左侧是使用后     右侧是使用前 差距还是比较大的 感兴趣的小伙伴  可以下载源码  自己尝试一下 https://github.com/scottjehl/picturefill PICTUREFILL The Web is truly worldwide, and we have to confront the

HTML5 placeholder实际应用经验分享及拓展

一.HTML5 placeholder介绍 placeholder在英汉词典中解释成了"占位符".我们不妨将placeholder来个临时拆分:place + hold + er.placeholder指的就是:"足以镇住这块区占据位置的字符.无论是传统软件或是web应用中,placeholder都是相当常见的. 如FireFox浏览器右上方的搜索占位符: 在可输入控件中,"占位符"一般作提示用,简洁明了,空间利用率高.然而,在XHTML的时代,控件元素并

CSS预处理——LESS

LESS是什么? less是一门CSS预处理语言.由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量.函数.作用域等概念.而LESS在CSS的基础语法之上,引入了变量.Mixin混入.运算以及函数等功能,大大简化了CSS的编写,降低了CSS的维护成本. 本质上,LESS包含一套自定义的语法及一个解析器,写好的LESS文件会通过解析器编译生成CSS文件.LESS并没有建材CSS原有的特性,更不是用来取代CSS的,而是在现有的语法基础上,为CSS加入程序式语言的功能特性.所以,标准的CSS文