大家都说CSS学和写都简单，那么写了多年CSS的同学是否有静下来思考过，自己写CSS是有较为系统的和具有一定规范的，而不是草率的写CSS。另外就是自己写的CSS在团队中，别的同学是否能看到代码就知道您写的是什么？如果没有，那不仿看看这里提到的一些概念与思想，比如：Sass 、SCSS、LESS、BEM、SMACSS、OOCSS、ACSS和CCSS等。这里列出的，你听说过、了解过或已在运用的有几个。如果是第一次听说他们，不仿进入相关小节，了解他们是什么？

作为一名Web开发人员，在关注浏览器性能的时候，雪碧图("image spriting")这样的技术诞生了，旨在减少HTTP的请求数。事实证明，更少的请求数（当文件大小没有显著的区别时）对于一个页面的加载速度有明显的区别。“Image Spriting”的工作原理是一堆的图像（称为“sprites”,精灵）合并成一张大的图像（国内称为雪碧图），以达到减少HTTP的请求数。然后通过巧妙的显示雪碧图中需要呈现的图像。

如果你的朋友、同事或网友有跟你说过Sass或者Compass，或者两者，那太棒了。现在怎么办？在这篇初学者指南中，我首先带领大家使用Sass和Compass。我将告诉大家如何完成安装和创建一个测试项目。怎么使用Sass编译CSS，甚至还会告诉大家有关于Sass中的"mixin"。

CSS雪碧图是将几个图片拼合成一张图片，以此来减少HTTP请求的方法，并且可以提升网站加载性能。除了使用传统方法在Photoshop中手动拼合，还有一些简便的方法和便捷的工具来帮助我们完成这项工作。但是，以我处理CSS雪碧图的经验来说，没有哪种方法比使用Compass的Sprite函数更轻松容易的了。现在就让我们来看看他是如何工作的。

总的来说，使用Sass是一种很好地加速前端开发的途径，在我的每一个项目中都会使用它。Sass(跟其他预编译器一样)是允许嵌套样式、函数编程和支持混合的。Foundation到目前为止出了几个版本，之前我们都是在使用最常见的HTML/CSS版本，现在我们将讨论如何使用Sass来创建一个版本。Foundation开发团队不但只是使用Sass来开发更加友好和动态的样式，而且还提供更多定制样式在Sass版本上而不是把HTML/CSS版本上。Sass更加适合一些这样的人，就拿我来说，设计第一，编码第二。学习HTML和CSS是很简单的，并且能够很快地实现你想要的效果，但是，要从这些学习衔接到更加高级的jQuery和JavaScript却是很困难的。前面提到，使用Sass允许你使用函数编程、支持变量和重用代码，就像使用高级的、动态语言一样。