经验分享:使用 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({
'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
译文来自:http://www.infoq.com/cn/news/2014/02/restylejs
经验分享:使用 Restyle.js 简化 CSS 预处理的更多相关文章
- JS控制css float属性的用法经验总结
JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...
- html css 前端基础 学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
- 怎样使用自定义标签简化 js、css 引入?
国庆将至,工作兴致全无,来总结点项目里平时不起眼干货. 前端引入 js .css 一般是这样: <script type="text/javascript" src=&quo ...
- 经验总结:按需加载JS和css
项目中做过这样的事情:所有页面都通过SSI指令 include这样一份public-js.shtml, 用来引入涉及到的js(包括公共的脚本 验证插件 自定义组件等),但是一些没有交互效果的页面根本不 ...
- 以技术面试官的经验分享毕业生和初级程序员通过面试的技巧(Java后端方向)
本来想分享毕业生和初级程序员如何进大公司的经验,但后来一想,人各有志,有程序员或许想进成长型或创业型公司或其它类型的公司,所以就干脆来分享些提升技能和通过面试的技巧,技巧我讲,公司你选,两厢便利. 毕 ...
- Less:Less(CSS预处理语言)
ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...
- 【干货分享】Node.js 中文资料导航
这篇文章与大家分享一批高质量的的 Node.js 中文资料.Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用 Node ...
- Kaggle比赛冠军经验分享:如何用 RNN 预测维基百科网络流量
Kaggle比赛冠军经验分享:如何用 RNN 预测维基百科网络流量 from:https://www.leiphone.com/news/201712/zbX22Ye5wD6CiwCJ.html 导语 ...
- CSS预处理——LESS
LESS是什么? less是一门CSS预处理语言.由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量.函数.作用域等概念.而LESS在CSS的基础语法之上,引入了变量.Mixin混入.运算以及 ...
随机推荐
- Windows Internals学习笔记(一)概念与工具
参考资料: 1. <Windows Internals> 2. Windows Drive Kit 3. Microsoft Windows SDK 4. WDK下载地址 知识点: 1. ...
- 讓 SourceTree 讀取自定的 SSH key
我目前都在 Mac 底下開發,用 Git 來管理我的程式碼,比較一番之後決定用 SourceTree 來做為 Git client.SourceTree 是一款 Mac 底下的版本控制系統 clien ...
- php 上传文件。$_FILES
<form name="article" method="post" enctype="multipart/form-data" ac ...
- Java I/O 文件加锁,压缩
文件加锁: 文件加锁机制允许我们同步访问某个作为共享资源的文件. public class Test { public static void main(String[] args) throws I ...
- hdu 3117 Fibonacci Numbers
这道题其实也是水题来的,求Fibonacci数的前4位和后4位,在n==40这里分界开.后4位不难求,因为n达到了10^18的规模,所以只能用矩阵快速幂来求了,但在输出后4位的时候一定要注意前导0的处 ...
- GO语言中间的derfer
defer Go语言中有种不错的设计,即延迟(defer)语句,你可以在函数中添加多个defer语句.当函数执行到最后时,这些defer语句会按照逆序执行, 最后该函数返回.特别是当你在进行一些打开资 ...
- JavaMail 发送邮件案例
#----------------这两个是构建session必须的字段---------- #smtp服务器 mail.smtp.host=smtp.exmail.qq.com #身份验证 mail. ...
- 记录一下表格用poi的导出word
也是网上找的代码http://53873039oycg.iteye.com/blog/2152009,但是横向合并单元格没成功.只能用很蠢的办法建立了好多table public void fillT ...
- 选择排序算法Java与Python实现
Java 实现 package common; public class SimpleArithmetic { /** * 选择排序 * 输入整形数组:a[n] [4.5.3.7] * 1. 取数组编 ...
- Spring MVC 基础注解之@RequestMapping、@Controller、(二)
我现在学的是spring4.2 今天主要学习了Spring MVC注解 引入注解可以减少我们的代码量,优化我们的代码. @Controller:用于标识是处理器类: @RequestMapping:请 ...