Sass 基础

在使用 Sass 之前，你需要在项目中设置它。如果你只是想浏览这里，请继续，但我们建议你先安装 Sass。如果你想了解如何设置一切，请点击这里。

预处理预处理 permalink

单独的 CSS 可能很有趣，但样式表正变得越来越大、越来越复杂且难以维护。这就是预处理器可以帮助的地方。Sass 具有 CSS 尚未具备的功能，如嵌套、混入、继承和其他巧妙的特性，帮助你编写健壮、可维护的 CSS。

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

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

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

sass --watch input.scss output.css

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

sass --watch app/sass:public/stylesheets

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

💡 Fun fact:

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

变量变量 permalink

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

  SCSS

  Sass

  CSS

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

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

      
      Playground
    Sass Syntax$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

CSS Outputbody {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

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

嵌套嵌套 permalink

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

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

考虑到这一点，这是网站导航的一些典型样式：

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntaxnav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

      
      Playground
    Sass Syntaxnav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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


CSS Outputnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

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

局部文件局部文件 permalink

你可以创建局部 Sass 文件，其中包含可以包含在其他 Sass 文件中的小段 CSS。这是模块化 CSS 并帮助保持事物更易于维护的好方法。局部文件是以下划线开头命名的 Sass 文件。你可能会将其命名为类似 _partial.scss 的名称。下划线让 Sass 知道该文件只是一个局部文件，不应生成为 CSS 文件。Sass 局部文件与 @use 规则一起使用。

模块模块 permalink

Dart Sass: since 1.23.0
LibSass: ✗
Ruby Sass: ✗

Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.

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

  SCSS

  Sass

  CSS
SCSS Syntax// _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;
}
Sass Syntax// _base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

// styles.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white

CSS Outputbody {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

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

混入混入 permalink

CSS 中有些东西写起来有点乏味，尤其是 CSS3 和众多的供应商前缀。混入让你可以创建一组 CSS 声明，你希望在整个站点中重用。它有助于保持你的 Sass 非常 DRY（不重复）。你甚至可以传入值以使你的混入更加灵活。这是一个 theme 的例子。

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax@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);
}



      
      Playground
    Sass Syntax@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)




CSS Output.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

要创建混入，你使用 @mixin 指令并给它一个名称。我们将混入命名为 theme。我们还在括号内使用变量 $theme，以便我们可以传入任何我们想要的 theme。创建混入后，你可以使用以 @include 开头后跟混入名称的 CSS 声明。

扩展/继承扩展/继承 permalink

使用 @extend 可以让你从一个选择器向另一个选择器共享一组 CSS 属性。在我们的示例中，我们将使用另一个与扩展密切相关的功能——占位符类，创建一个简单的错误、警告和成功消息系列。占位符类是一种特殊类型的类，只有在被扩展时才会打印，可以帮助保持编译后的 CSS 整洁干净。

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax/* 这个 CSS 将打印，因为 %message-shared 被扩展。 */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// 这个 CSS 不会打印，因为 %equal-heights 从未被扩展。
%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;
}

      
      Playground
    Sass Syntax/* 这个 CSS 将打印，因为 %message-shared 被扩展。 */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

// 这个 CSS 不会打印，因为 %equal-heights 从未被扩展。
%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






CSS Output@charset "UTF-8";
/* 这个 CSS 将打印，因为 %message-shared 被扩展。 */
.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  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 从未被扩展。

运算符运算符 permalink

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

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax@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;
}

      
      Playground
    Sass Syntax@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



CSS Output.container {
  display: flex;
}

article[role=main] {
  width: 62.5%;
}

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}

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