在了解完Sass之后，相信大大都人更期望了解它到底如何将我们编写CSS代码的效率提高的？到底是如何让我们的CSS代码更具有可维护性的？到底如何让我们编写的CSS代码更具有重用性的？那么笔者就来讲述一个Sass编码的实例，来解答这些疑问。

首先我们先拟定一个需求，让HTML中按钮有不异的巨细和差此外格式，那么笔者按照这一需求，使用Sass编写出了如下代码：

首先笔者来分析一下，上述代码的具体含义。在20行以前笔者将按钮的配景色，字体颜色、按钮配景色、边框线颜色界说成了变量；在21行到25行，笔者将按钮的主体设置封装成了一个混合宏（与函数观点类似），并接受三个参数，分袂为笔者所界说的变量；从26行到39行，笔者将按钮的根基模型界说了一段CSS代码；第39行到最后，笔者使用类选择器，分袂挪用了相应混合宏，并通报了三个参数。

上述的Sass源码编译之后的代码就是这样的，如下所示：

编译后的CSS与源码对最近看，我们先总结以下区别：

1．变量和混合宏没有在编译后呈现

2．混合宏生成对应的代码

比拟之后相信列位读者也有所发明，Sass的源码从代码上要多于CSS代码，这是因为我们考虑了扩展性和维护性。

那么可以想象一下，假如我们需要对颜色微调，不需要去寻找内部代码，，只需要变动头部的变量即可，维护性增强；再假如我们需要扩展一个按钮的颜色，那么我们只需要再特别增加三个变量，然后去挪用@mixin混合宏即可；再假如我们在另一个项目中也需要用到按钮样式，那么我们只需要在相应项目中使用这个sass就可以了，并且我们可以对颜色很便利的微调。

那么上例就展示了可维护性高、可扩展性强，并且复用性高，也就意味着效率也就变高了。Sass的成果不止于此，还有流程控制语句、内置函数、运算符等，这些都能够提高我们的编码效率，这在我们根基语法章节做详细的介绍。

IT兄弟连 HTML5教程 初识Sass Sass的感化