9、前端开发：Bourbon、精灵图与网络字体的应用

前端开发：Bourbon、精灵图与网络字体的应用

1. Bourbon增强SASS功能

Bourbon是SASS的强大扩展，能简化许多前沿的CSS3调用。通常在编写新特性调用（如 border-radius ）时，为了适配各浏览器的特定前缀（如 -moz 或 -webkit ），我们可能需要编写四到五行代码。而Bourbon让我们只需调用一行代码并传递参数即可。例如：

@include border-radius(5px);

这行代码会输出所有相关的浏览器特定CSS，使开发样式表更简洁、易维护。更多关于Bourbon的信息可查看：https://github.com/thoughtbot/bourbon 。

2. 添加精灵图优化性能

ArtFlow的部分用户抱怨应用加载速度过慢。分析发现，页面请求单个图像所花费的时间极不合理。因为有大量小图像和图标，每个都会向服务器发送一个请求。对于低流量网站，这可能不是大问题，但高流量网站会因过多资源请求而不堪重负。
- 解决方案 ：
- CDN ：可以将资源交付给内容分发网络（CDN），如Akamai或亚马逊的CloudFront，但使用他人的快速服务器交付资源会产生费用，且每次文件请求都会给客户端带来额外开销。
- 精灵图 ：将多个小图像合并为一个图像，减少请求数量并消除额外开销。这一技术源于