经验分享:使用 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混入.运算以及 ...
随机推荐
- python 自动生成C++代码 (代码生成器)
python 代码自动生成的方法 (代码生成器) 遇到的问题 工作中遇到这么一个事,需要写很多C++的底层数据库类,但这些类大同小异,无非是增删改查,如果人工来写代码,既费力又容易出错:而借用pyth ...
- 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画,文件结构浅析
注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...
- .htaccess文件 301重定向URL重写[NC][R][F][L]是什么意思
.htaccess中的[NC][R][F][L]几个标记是什么意思 NC: no case,就是说不区分大小写 R:redirect,重定向 F:forbidden,禁止访问 L:last,表示已经是 ...
- 编写spring配置文件时,不能出现帮助信息
由于spring的schema文件位于网络上,如果机器不能连接到网络,那么在编写配置信息时候就无法出现提示信息,解决方法有两种: 1.让机器上网,eclipse会自动从网络上下载schema文件并缓存 ...
- ip地址的组成(网络位+主机位)
IP地址子网掩码都是32位的2进制,为了方便记忆转成10进制,通过子网掩码来区分网络位和主机位,子网掩码跟IP地址一一对应,子网掩码为1的是网络位,为0的是主机位.如:192.168.1.2 掩码25 ...
- Python变量类型
Python变量类型 变量是存储在内存中的值,因此在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定的内存,并决定什么数据可以被存储在内存中. 因此变量可以指定不同的数据类型, ...
- 算法_栈的Java的通用数组实现
栈是一个常用的最简单的数据结构,这里提供了其实现.内部维护了一个数组,并且可以动态的调整数组的大小.而且,提供了迭代器支持后进先出的迭代功能.Stack的实现是所有集合类抽象数据类型实现的模板,它将所 ...
- AJAX的简介
AJAX 指异步JavaScript及XML(Asynchronous JavaScript And XML(异步JavaScript和XML)),是指一种创建交互式网页应用的网页开发技术. 国内通常 ...
- gcc, numpy, rabbitmq等安装升级总结
1. 公司在下面目录安装了gcc-4.8.2,以支持c++11,可以通过在bashrc中添加来实现: PATH=/opt/compiler/gcc-4.8.2/bin:$PATH 2. 公司环境切换到 ...
- white-space: nowrap
CSS:需要加上宽度(width:100px).超出隐藏(overflow:hidden;).强制在同一行显示(white-space: nowrap;).省略号(text-overflow:elli ...