Sass 是成熟、稳定、强大的CSS 预处理器，截止到目前为止已经发展有 10 年，前当最新 release 版本为3.5.5。而SCSS是Sass3版本当中引入的新语法特性，完全兼容 CSS3 的同时继承了Sass强大的动态功能。本文翻译自《Sass Guide》和《Sass Syntactically Awesome StyleSheets》两篇官方文档，讲解了现代化前端开发当中经常使用的 SCSS 语法特性，便于开发小组的同学快速上手。

基于 Gulp 完成前端自动化的年代，出于快速上手以及 npm 安装方便的考虑，开发团队一直沿用Less和gulp-less作为 CSS 预处理工具，但是 Sass 提供了更加丰富的动态语法特征，因此逐步淘汰基于 Gulp 的beaver前端项目脚手架以后，新项目全部基于 Webpack 的node-sass和sass-loader作为预处理工具。Sass 和 Less 的详细比较可以参考sass-vs-less和Sass 与 Less 比拼两篇文章，里面对两者的优劣做了非常详实的比较。

层叠样式表（CSS，Cascading Stylesheet）用于指定 Web 浏览器的渲染样式，CSS 2.1 规范于 2011 年发布之后日益变得丰富与庞大，因此 W3C 工作组将规范分散至不同模块，每个模块都独立的进行版本更新。其中，全部 CSS 2.1 特性模块都被升级至 3 作为版本号，而全新的功能模块则从版本号 1 开始进行定义。因而 CSS 3 并非实际意义上的 W3C 规范，准确的描述应该为 CSS 标准规范第 3 版与部分新规范第 1 版的集合。

伴随 Web 浏览器技术的日新月异，现代 CSS 开发的重点，已经不在于处理浏览器碎片化引发的各类兼容性问题，而是在确保代码可维护性前提下，符合 Web 页面的语义标准，从而尽可能准确的表达各类交互创意。在阅读 W3C 工作组成员 Lea Verou 的《CSS Mastery》之后，开始重新审视前端重度交互下 CSS 提供的各类全新特性，结合 Mozilla 社区的 《CSS Reference》 一文，重新讨论 CSS 技术相关的一些主题。