或许你已经听过一个叫作Sass的东东？可能你已经了解它，并且你能像大师一样写出一些函数？对于不清楚我在讲什么的读者或者客户，你们可以想想web开发过程，你们的期望和站点用户的体验想要怎样的。无论如何，我都要给大家分享一下，为什么我认为Sass是一个很好的东西。对于那些不熟悉web前端开发的人，Sass和CSS或许只是一些让人感觉凌乱的词语，但就是这些词语，对于幕后的开发过程是很重要的，而这些过程，形成了一个美丽的、响应式的网站。

对于一位程序员来说，对数组并不会陌生。但对于前端人员（像我这样不算前端的前端）对于数组，只是听过，看过，但不知道如何使用？然而在Sass3.3版本中开始引入一个新的数据类型maps，他长得跟数组非常的相似。但也让我极其的苦逼，因为我不懂数组呀，不知道如何下手开始使用Sass的map功能。

先简单的说一下 Sass 这个东西。CSS 是一些非常基础简单得语句的组合，既然简单的语句，就不可避免的有很多重复，冗余的东西。而且没有传统编程语言变量、控制语句等高级特性，所以造成了 CSS 编写低效，往往需要通过查找替换、大量复制来修改或者编写。Sass 就是用来弥补这个缺陷，为 CSS 提供额外的高级功能，使其开发更加方便快捷，更加方便管理。所以你需要使用 Sass 的语法来编写代码，然后通过 Sass 编译成具体的 CSS 代码，然后使用。所以这里就需要学习一下 Sass 的语法。

一直以来Sass的能定义变量都是其核心功能。但随着项目的越来越庞大，越来越让你感觉管理项目的变量，和调用变量是件蛮麻烦的事情。但随着Sass3.3的出现，随着map功能的出现，我们不应该还仅停留在以前最古老的基础上使用Sass的变量，我们应该使用map的特性来管理和调用变量，让新功能帮助大家做更多的事情。特别的Lunelson的List-map中的map和list的功能的结合，将让你的Sass技术水平提高到另一个层次。

z-index在一个Web的应用可以说简单也可以说是复杂。特别是一个复杂的系统上要管理好多个z-index并不是件容易的事情，不过通过Sass这样的预处理器来管理会让你变得容易与简单很多。而且有关于如何使用Sass更好的管理z-index的值文章介绍如雨后春笋般的涌现，比如Jackie Balzer的Sass z-index Management for Complex Layouts，Doug Avery的Sass and z-indexes: a (slightly) better way以及Chris Coyier去年发布的Handling z-index等。今天Sass大师Hugo Giraudel在前几篇文章的基础整理了一篇使用Sass管理z-index更好的解决方案，我想这篇文章会让你受益无穷。

z-index本身就是一个棘手的事情，在一个复杂的布局中管理z-index的顺序（层级）更是困难。不同的层叠顺序和内容，要跟踪他们的数字增加是很难的事情——而且他们来自CSS文件，忘了他吧！因为z-index可以造就一个UI元素可见或不可见，使您的网站的用户界面工作秩序是很微妙的。

Sass中最大的特点之一就是可以设置变量，可以给变量赋值，此值可以是字符串，可以是值，也可是以列表，甚至是map。在样式中可以引用这些变量，甚至在Sass指令中也可以调用这些变量。大常看到最多的一个示例就是颜色的运用，通过给颜色设置一个变量，需要更换成别的颜色时，仅仅改一个值就行了。有人探讨将变量用到选择器中。那么选择器中使用变量真的好吗？如果你不清楚是好还是不好，不仿看看这篇文章。你或许会找到你需要的答案

Sass的第三个版本给我们带来了新的数据类型，叫做map。虽然你可以不知道这个名称，但在其他的语言中我们使用过map，通常就是关联数组。换句话说，Sass的map就是用关键名匹配对应值的一个数组。不清楚为什么在CSS中为什么要使用(Sass也是CSS)，因此这篇文章将告诉你为什么？这个列表虽然不能面面俱到可以随意查找和分享其他用例。

Sass的最大好处之一就是具有创建可重用代码块的能力。我经常用%placeholders或者@mixins创建可重用代码模块。占位符（%placeholders）和混合宏（@mixins）之间有很大不同。简而言之：当你需要传递变量时使用混合宏（@mixins）,若不需要，则使用占位符（%placeholder）。

去年年底看到Dudley Storey在他的一篇文章《2014年前端将会发生什么》一文中提到，如何在Web页面中实现类似于Photoshop制图软件中图层混合模式的效果，特别的激动。从而也知道CSS混合模式这样的一个概念，觉得特别有意思，加上这段时间看到相关的讨论，我也有点手痒痒，今天也将试试这一神技，给我们Web的效果带来什么样的变化。