BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

使用Restyle.js简化CSS预处理

| 作者 Andy Earnshaw 关注 0 他的粉丝 ,译者 梅雪松 关注 0 他的粉丝 发布于 2014年2月20日. 估计阅读时间: 5 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT