首页 > 代码库 > 经验分享：使用 Restyle.js 简化 CSS 预处理

经验分享：使用 Restyle.js 简化 CSS 预处理

2024-07-06 06:59:39   222人阅读

　　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 　


联系
我们