Lzh on GitHub

简介

Sass 是一种样式表语言，会被编译成 CSS。它允许你使用 变量、嵌套规则、mixin、函数等特性，并且完全兼容 CSS 语法。Sass 有助于保持大型样式表的良好组织，并让你能够轻松在项目内部和跨项目共享设计。

Sass 是一种样式表语言，会被编译成 CSS。它允许你使用 变量、嵌套规则、mixin、函数等特性，并且完全兼容 CSS 语法。Sass 有助于保持大型样式表的良好组织，并让你能够轻松在项目内部和跨项目共享设计。

  • 如果你在寻找 Sass 的入门介绍，可以查看 教程。
  • 如果你想查找 Sass 内置函数，不妨看看 内置模块参考文档。
  • 如果你是通过 JavaScript 调用 Sass，你可能需要查看 JS API 文档。
  • 如果你是通过 Dart 调用 Sass，则可以查看 Dart API 文档。
  • 除此之外，可以使用语言参考的目录来导航！

预处理

CSS 本身很有趣，但样式表正变得越来越大、越来越复杂，也越来越难以维护。预处理器可以在这方面提供帮助。Sass 拥有一些 CSS 尚不具备的功能，如嵌套、混合宏（mixins）、继承以及其他有助于编写健壮且易于维护的 CSS 的小工具。

一旦你开始使用 Sass，它会获取你的预处理 Sass 文件，并将其保存为一个可以在你的网站中使用的普通 CSS 文件。

最直接的方法是在终端中实现。一旦安装了 Sass，你就可以使用 sass 命令将 Sass 编译为 CSS。你需要告诉 Sass 从哪个文件构建以及将 CSS 输出到哪里。例如，在终端中运行 sass input.scss output.css 会获取单个 Sass 文件 input.scss，并将其编译到 output.css。

你还可以使用 --watch 标志来监视单个文件或目录。--watch 标志告诉 Sass 监视你的源文件是否发生更改，并在每次保存 Sass 时重新编译 CSS。如果你想监视（而不是手动构建）你的 input.scss 文件，只需在命令中添加 --watch 标志即可，如下所示：

sass --watch input.scss output.css

你可以使用文件夹路径作为输入和输出，并用冒号分隔它们，从而监视和输出到目录。在这个例子中：

sass --watch app/sass:public/stylesheets

Sass 将监视 app/sass 文件夹中所有文件的更改，并将 CSS 编译到 public/stylesheets 文件夹中。

Sass 有两种语法！SCSS 语法（.scss）是最常用的。它是 CSS 的超集，这意味着所有有效的 CSS 也是有效的 SCSS。缩进语法（.sass）则更不寻常：它使用缩进而不是花括号来嵌套语句，并使用换行符而不是分号来分隔它们。我们所有的示例都提供了这两种语法。

变量

将变量看作是一种存储你希望在整个样式表中重复使用的信息的方式。你可以存储颜色、字体栈或任何你认为需要重复使用的 CSS 值。Sass 使用 $ 符号来定义变量。这是一个例子：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

当 Sass 被处理时，它会获取我们为 $font-stack 和 $primary-color 定义的变量，并输出带有我们变量值的普通 CSS。当处理品牌颜色并保持其在整个网站中的一致性时，这会非常强大。

嵌套

在编写 HTML 时，你可能已经注意到它具有清晰的嵌套和视觉层次结构。而 CSS 则不然。

Sass 允许你以遵循与 HTML 相同视觉层次结构的方式来嵌套 CSS 选择器。请注意，过度嵌套的规则将导致过于限定的 CSS，这可能难以维护，并且通常被认为是不良实践。

考虑到这一点，这里有一个网站导航典型样式示例：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

你会注意到 ul、li 和 a 选择器都嵌套在 nav 选择器内部。这是组织 CSS 并使其更具可读性的绝佳方法。

分片文件

你可以创建包含 CSS 小片段的分片 Sass 文件，并将其包含在其他 Sass 文件中。这是将 CSS 模块化并使其更易于维护的好方法。分片文件是文件名前带有下划线的 Sass 文件。你可以将其命名为 _partial.scss。下划线让 Sass 知道该文件只是一个分片文件，不应被编译成 CSS 文件。Sass 分片文件使用 @use 规则。

模块

你不必将所有 Sass 都写在一个文件中。你可以使用 @use 规则随意拆分。该规则将另一个 Sass 文件作为模块加载，这意味着你可以在你的 Sass 文件中，通过基于文件名的命名空间来引用它的变量、混合宏（mixins）和函数。使用一个文件也会将它生成的 CSS 包含在你编译后的输出中！

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

请注意，我们在 styles.scss 文件中使用了 @use 'base'。当你使用一个文件时，你不需要包含文件扩展名。Sass 很智能，会帮你搞定。

混合宏（Mixins）

CSS 中的一些东西写起来有点繁琐，尤其是在使用 CSS3 和许多存在的浏览器前缀时。混合宏允许你创建一组 CSS 声明，你可以在整个网站中重复使用这些声明。它有助于使你的 Sass 非常 DRY (Don't Repeat Yourself，不要重复自己)。你甚至可以传入值，使你的混合宏更灵活。这是一个 theme 的例子。

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

要创建混合宏，请使用 @mixin 指令并为其命名。我们将混合宏命名为 theme。我们还在括号内使用了变量 $theme，这样我们就可以传入我们想要的任何主题。创建混合宏后，你可以将其作为 CSS 声明来使用，以 @include 开头，后跟混合宏的名称。

扩展/继承

使用 @extend 可以让你从一个选择器共享一组 CSS 属性到另一个选择器。在我们的例子中，我们将使用另一个与扩展功能配合使用的特性——占位符类（placeholder classes），来为错误、警告和成功创建一系列简单的消息。占位符类是一种特殊的类，它只有在被扩展时才会输出，这有助于保持你编译后的 CSS 整洁。

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

上述代码的作用是告诉 .message、.success、.error 和 .warning 的行为与 %message-shared 完全一样。这意味着，任何出现 %message-shared 的地方，.message、.success、.error 和 .warning 也会出现。神奇之处在于生成的 CSS，其中每个类都将获得与 %message-shared 相同的 CSS 属性。这有助于你避免在 HTML 元素上编写多个类名。

除了 Sass 中的占位符类之外，你还可以扩展大多数简单的 CSS 选择器，但使用占位符是确保你不会扩展样式中其他地方嵌套的类最简单的方法，因为这可能会在你的 CSS 中产生意想不到的选择器。

请注意，%equal-heights 中的 CSS 没有被生成，因为 %equal-heights 从未被扩展。

运算符

在 CSS 中进行数学运算非常有用。Sass 有一些标准的数学运算符，如 +、-、*** **、**math.div() **和 %。在我们的示例中，我们将进行一些简单的数学运算来计算 article 和 aside 的宽度。

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

我们创建了一个非常简单的流体网格，基于 960px。Sass 中的运算使我们能够轻松地将像素值转换为百分比。