CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有“剪切”的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中，将介绍CSS和SVG中的剪切技术。

在我做过的web项目中，几乎都用到了css预处理器，这样一来，变量的使用为我们带来了极大的方便，也成为了使用css预处理器的一个主要优点。一般来说，颜色、十六进制等其他一些重复性的、难于记忆的代码片段，是最先被我们用变量存储起来的。在很多Sass或者Less的项目中，我都把颜色值和变量建立起一定的关系，变量的名字同时也描述了它们的用途，这样在项目当中就会避免一些问题，比如过分的纠结于具体实现过程。

HTML5和CSS3的功能完全超越5年前我们在web上所能做的事。CSS Shapes Module Level 1（CSS形状模块标准1）规范有可能打破web中矩形盒模型的限制而且将网页设计提升到新的高度。它允许元素设计成不同的形状(圆形或五边形的div)，并且用更自然的方式让文字环绕着元素（文字可以环绕着你的曲线设计而不一定要有直角边界）。本文将通过一些小演示来检测CSS Shapes的可能性，并且帮助你开始探索之旅！

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

一直以来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）。