CSS 样式表越来越大、 越来越复杂、越来越难以维护。这就是预处理可以提供帮助的地方。 Sass 为你提供了 CSS 中还不存在的特性，例如变量、 嵌套、混合、继承和其它实用的功能，让编写 CSS 代码变得有意思。

      最直接的方式就是在命令行中调用 sass 命令。安装 Sass 之后，你就可以用 sass 命令将 Sass 编译为 CSS 了。 首先你需要告诉 Sass 从哪个文件开始构建，以及将生成的 CSS 输出到哪里。 例如，在命令行中执行 sass input.scss output.css 命令， 将会把 Sass 文件 input.scss 编译输出为 output.css。

变量

变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问。 你可以在变量中存储颜色、字体 或任何 CSS 值，并在将来重复利用。Sass 使用 $ 符号 作为变量的标志。例如：

嵌套

在编写 HTML 时，您可能已经注意到它有一个清晰的嵌套和可视化层次结构。 而 CSS 则没有。

Sass 允许您嵌套 CSS 选择器，嵌套方式 与 HTML 的视觉层次结构相同。请注意，过度嵌套的规则 将导致过度限定的 CSS，这些 CSS 可能很难维护，并且 通常被认为是不好的做法。

理解了这一点，下面就来看一个典型的网站导航的样式 示例：

你将注意到 ul、li 和 a 选择器嵌套在 nav 选择器中。这是组织 CSS 并使其更具可读性的 好方法。

片段

您可以创建部分 Sass 文件，其中包含 您可以包含在其他 Sass 文件中的少量CSS片段。这是模块化CSS并有助于使事情更容易维护的好方法。partial 是一个以下划线开头的 Sass 文件。您可以将其命名为_partial.scss. 下划线让 Sass 知道该文件只是一个部分文件，不应将其生成到CSS文件中。Sass 部分与@use 规则一起使用。

模块

不必将所有 Sass 都写在一个文件中。您可以根据@use规则将其拆分。此规则将另一个 Sass 文件作为模块加载，这意味着您可以使用基于文件名的命名空间在 Sass 文件中引用其变量、mixin和函数。使用文件还将在编译输出中包含它生成的CSS ！

注意我们@use 'base';在styles.scss文件中使用。使用文件时，不需要包含文件扩展名。Sass 很聪明，会为你解决。

混合（Mixins）

CSS中的一些东西写起来有点乏味，尤其是CSS3 和许多存在的供应商前缀。mixin 允许您创建要在整个站点中重用的 CSS声明组。你甚至可以传入值来让你的 mixin 更加灵活。mixin 的一个很好的用途是用于供应商前缀。这是一个例子 transform。

要创建一个 mixin，您可以使用该@mixin指令并为其命名。我们已经命名了我们的 mixin transform。我们还在 $property括号内使用变量，因此我们可以传递任何我们想要的转换。创建混入后，您可以将其用作CSS 声明@include，以混入的名称开头。

扩展/继承

这是 Sass 最有用的特性之一。Using@extend允许您将一组CSS属性从一个选择器共享到另一个选择器。它有助于让你的 Sass 非常干。在我们的示例中，我们将使用另一个与扩展占位符类相辅相成的功能，为错误、警告和成功创建一系列简单的消息传递。占位符类是一种特殊类型的类，只有在扩展时才会打印，有助于保持编译后的CSS整洁干净。

上面的代码所做的是告诉.message、.success、.error和.warning表现得像%message-shared。这意味着任何%message-shared出现的地方，.message, .success, .error, & .warning也会出现。奇迹发生在生成的CSS中，其中每个类都将获得与. 这有助于您避免在HTML 元素上编写多个类名。%message-shared

除了 Sass 中的占位符类之外，您还可以扩展大多数简单的CSS选择器，但使用占位符是确保您没有扩展嵌套在样式中其他地方的类的最简单方法，这可能会导致 CSS 中出现意外的选择器。

请注意，不会生成CSS，%equal-heights因为%equal-heights它永远不会扩展。

操作符

在 CSS 中经常需要做数学计算。Sass 支持一些标准的 数学运算符，例如 +、-、*、/ 和 %。在下面的例子中，我们 将做一些简单的数学运算来计算出 aside & article 的宽度。

上述代码创建了一个非常简单的流式网格，以 960px 作为基准。Sass 中的操作符 让我们可以做一些比如将像素值转换为百分比的操作， 并且使用起来非常简单。