因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。

经过上两篇揭秘，大家心里对sass应该有了很好的认知感了，这篇文章基于前面两篇为基础，请确保你先浏览了前面的两篇文章，不然可能给你带来疑惑感觉。

1. sass揭秘之变量
2. sass揭秘之@mixin，%，@function

这篇文章关键是对sass判断或循环的语法熟悉下，至于逻辑这东西，和其他的语言如js，php什么的是一样一样的，没什么说头。经过前两篇的积累，也就不需要那么啰嗦了，所以只写scss代码。现在你就可以想想css如果用上这些东西会是什么样子的呢？

因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。

在阅读本文章之前，请先确认你已经阅读了上篇文章sass揭秘之变量，不然会给你带来疑惑的感觉。

其实很多人之所以对sass或less感兴趣，就是因为他们能使用变量和这个@mixin功能，而后面的%和@function知道的人就比较少了。所以说@mixin这个东西还是很有诱惑力的，没办法，广告做得好啊，大明星。这里之所以把%和@function和@mixin放在一起，当然并非无缘无故，一看@mixin和@function就是兄弟，长得那么像，而%这个后起之秀，更是在一定程度上抢了@mixin的不少风头。

因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。

变量对于一个程序员来说非常的熟悉，但对于样式这一块还是很新的一个概念。我们所知道的变量有全局变量，局部变量。但在SASS中这个概念对于刚开始sass的人，也许其最大的抱怨就是sass的变量了，尤其是那些了解less变量的，更是会说sass的变量做得不如less的变量好，less中有明显的全局变量和局部变量之分，但是到sass这边来，好像有点乱了，分不清了。其实不管sass的变量还是less变量都是有其设计的原理的，有着不一样的科学性，下面我们简单来了解下。