写点什么

使用 Restyle.js 简化 CSS 预处理

  • 2014-02-19
  • 本文字数:1306 字

    阅读完需:约 4 分钟

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

2014-02-19 04:131625

评论

发布
暂无评论
发现更多内容

Netty FastThreadLocal实践

FunTester

Altair RapidMiner,将数据科学、深度学习等多种功能同时集成的一站式数据分析平台

Altair RapidMiner

机器学习 大模型 #人工智能 #数据分析

从仿真到生成式仿真,大模型助力工业智能化发展

Altair RapidMiner

#人工智能 仿真技术 制造业数字化 #大模型

业务转型,你的团队该如何应对?

凌晞

团队管理 数字化业务转型IT路线图

广东人仁康一项技术通过国家科技成果评价达到国际先进水平平

Geek_2d6073

神仙级python入门教程(非常详细),从零基础入门到精通,建议收藏

没脾气

Python

SMC-R 透明加速 TCP 技术,在 Redis 场景下的应用实践 | 干货推荐

OpenAnolis小助手

操作系统 龙蜥社区 SMC-R 浪潮信息 TCP 技术

PingCAP 与沙利文联合发布《中国企业全球化运营白皮书》

先锋IT

GitHub爆火标星127k!这份字节Python背记手册到底有什么魔力?

没脾气

Python 程序员 自学编程 python教程 python自学

【YashanDB知识库】outline固化执行计划

YashanDB

yashandb 崖山数据库

Pika 主从数据同步状态指标 “repl_connect_status” 简介

apache/dubbo-go

redis Pika

开发体育赛事直播平台源码:具备全面的体育数据资料库

软件开发-梦幻运营部

小游戏应该如何创建一个元服务项目

FN0

鸿蒙卡片 元服务

What’s new in Apache/dubbo-getty 1.5.0

apache/dubbo-go

dubbo

RA8D1-Vision Board上OSPI-Flash实践

芯动大师

瑞萨MCU

蓝易云 - javaee springMVC cookie的存入和取出

百度搜索:蓝易云

云计算 运维 Cookie 云服务器 JavaEE

蓝易云 - javaee springMVC model的使用

百度搜索:蓝易云

Java 云计算 运维 服务器 云服务器

蓝易云 - javaee springMVC数字类型转换之通过注解的方式

百度搜索:蓝易云

Java 云计算 运维 服务器 云服务器

6 大亮点!全新 Anolis OS 23.1 GA 版正式发布,满足多样化平台支持

OpenAnolis小助手

操作系统 国产操作系统 龙蜥操作系统 Anolis OS Anolis OS 23.1

计算机英文教材太难啃?Higress 和通义千问帮你!

阿里巴巴云原生

阿里云 云原生 Higress

Linux设备驱动系列(14) —— 使用全局工作队列

Linux内核拾遗

Linux内核 中断 工作队列

读书笔记《一如既往》

酱紫的小白兔

低代码开发赋能教育数字化及典型场景

不在线第一只蜗牛

低代码 教育新创

报名倒计时 2 天!龙蜥社区系统安全 Meetup 演讲亮点一览

OpenAnolis小助手

操作系统 系统安全 浪潮信息 龙蜥meetup

ApsaraMQ Copilot for RocketMQ:消息数据集成链路的健康管家

阿里巴巴云原生

阿里云 RocketMQ 云原生

案例研究|为什么 CDG 会选择从 DataDog 迁移至观测云?

观测云

可观测性

龙蜥社区 5 月度运营大事件回顾

OpenAnolis小助手

开源 操作系统 龙蜥社区 月报

低代码用得好,开发真的很顺手

伤感汤姆布利柏

数据驱动的未来:数据融合与平台化应用的探索

快乐非自愿限量之名

低代码 数据驱动 平台化

天润融通,荣获2024中国AI应用层创新企业

天润融通

人工智能 天润融通

惊了!字节大佬总结的这份《零基础学python神级笔记全彩版》真的太强了

没脾气

Python 程序员 自学编程 架构师 自学python

使用Restyle.js简化CSS预处理_JavaScript_Andy Earnshaw_InfoQ精选文章