如果您打算开发样式表，Syntactically Awesome Stylesheets (Sass) 能够帮助您显著改善整体体验。Sass 是一种样式表语言和层叠式样式表 (CSS) 预处理程序，它为 CSS 开发添加了传统编程属性。Sass 引进了多种编程特性，包括变量、样式的逻辑嵌套、混入 (mixin)、参数和继承。在为网站开发样式表时，Sass 能够将您的 Sass 转化为标准 CSS 标记，从而显著简化您的工作。
在这篇文章中，您将学习 Sass 的重要准则。本文提供了几个实例，展示了如何使用 Sass 提高 CSS 开发的速度和效率。
Sassy CSS (SCSS) 是 CSS3 的超集；任何 CSS3 代码均为有效的 SCSS 代码。本文中使用的代码示例均为 SCSS。
为何使用 SassSass 语法- SCSS 是最常用的语法，它是 CSS 语法的超集。
- 缩进式语法 .sass 较为陈旧，使用行缩进来指定代码块。
Sass 是一种可靠的、可配置的、功能丰富的 CSS 开发解决方案。它使用了动态构造方法，而非旧式的静态 CSS 规则。如果您想采用日常开发中使用的编程风格，同时访问编程语言结构，那么 Sass 将是您最理想的选择。Sass 出色的灵活性和功能完备的解决方案将为您带来惊喜。
CSS 预处理程序对于所有 Web 开发环境都有着重要的意义。它们将：
- 缩短您的开发时间。
- 为 CSS 开发应用 “不要重复自己” (DRY) 的准则。
- 使您的代码更加清晰易读。
CSS 预处理程序技术多种多样。本文采用 Sass 的原因在于，它高度灵活，并且具有许多特性。
安装 SassSass 主要使用 Ruby 来实现，但也存在其他实现。您要做的第一步是通过 Ruby 组件安装 Sass。
- 如果您的系统中尚未安装 Ruby，请下载和安装 Ruby：
- Windows 用户：
- Mac OS X：如果您的操作系统中已经安装了 Ruby。
- Linux：通过您喜爱的程序包管理器安装 Ruby。
- 通过以下命令安装 Sass Ruby gem： gem install sass
准备好 Sass 环境使用您喜爱的文本编辑器，创建一个扩展名为 .scss 的文件。文本编辑器对 Sass 的支持级别各有不同。请参见 部分，了解具有不同级别 Sass 语法突出显示支持的文本编辑器的列表。
将清单 1 中的代码复制粘贴到新的 .scss 文件中。
清单 1. Sass 代码样例1
2
3
4
5
6
7
| #blueBar {
position: relative;
height:37px;
left:0;
right:0;
top:0;
}
|
Sass 语言是 CSS3 的超集。在 Sass 版本 3.2.1 中，所有有效的 CSS 也属于有效的 Sass。中的代码是有效的 CSS，因此也是有效的 Sass 代码。无论如何，您都必须将清单 1 中的 Sass 转为 CSS。如果未进行该转化，Web 浏览器将无法正确解释您的样式表。您不必每次使用 sass-convert命令将 Sass 转为 CSS，而是可以将 Saas 设置为在您每次保存时自动将文件转为 CSS。要使 Sass 自动监视您的文件，请在命令行应用程序中运行清单 2 所示的命令。
清单 2. 监视文件1
2
| sass --watch
style.scss:style.css
|
您还可以通过清单 3 中的命令，使用 Sass 监视整个目录。
清单 3. 监视目录1
2
| sass --watch
stylesheets/sass:stylesheets/compiled
|
这样，您的框架就已经创建完成，每次保存 Saas 文件时，Sass 都会自动将您的代码转为有效的 CSS。现在可以开始使用该框架。 |
