Sass 基础

在使用 Sass 之前，你需要在项目中设置它。如果你只想在这里浏览，请继续，但我们建议你首先安装 Sass。点击此处，如果你想学习如何设置所有内容。

预处理预处理永久链接

CSS 本身可能很有趣，但样式表变得越来越大、越来越复杂，也越来越难以维护。这就是预处理器可以提供帮助的地方。Sass 拥有 CSS 中尚不存在的功能，例如嵌套、Mixin、继承和其他巧妙的功能，这些功能可以帮助你编写健壮且易于维护的 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 文件夹。

💡 有趣的事实

Sass 有两种语法！SCSS 语法 (.scss) 最常用。它是 CSS 的超集，这意味着所有有效的 CSS 也是有效的 SCSS。缩进语法 (.sass) 比较少见：它使用缩进而不是花括号来嵌套语句，使用换行符而不是分号来分隔它们。我们所有的示例都以这两种语法提供。

变量变量永久链接

可以将变量视为一种存储信息的方式，你希望在整个样式表中重用这些信息。你可以存储诸如颜色、字体堆栈或任何你认为需要重用的 CSS 值之类的内容。Sass 使用 $ 符号来使某些内容成为变量。下面是一个例子

  SCSS

  Sass

  CSS

       游乐场SCSS 语法$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

       游乐场Sass 语法$font-stack: Helvetica, sans-serif
$primary-color: #333

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

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

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

嵌套嵌套永久链接

在编写 HTML 时，你可能已经注意到它具有清晰的嵌套和视觉层次结构。另一方面，CSS 没有。

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

考虑到这一点，以下是一些网站导航的典型样式示例

  SCSS

  Sass

  CSS

       游乐场SCSS 语法nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

       游乐场Sass 语法nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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


CSS 输出nav 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 并使其更易读的好方法。

部分部分永久链接

你可以创建部分 Sass 文件，其中包含你可以包含在其他 Sass 文件中的少量 CSS 代码片段。这是一种模块化 CSS 并帮助保持易于维护的好方法。部分是一个以下划线开头的 Sass 文件。你可能会将其命名为 _partial.scss 之类的内容。下划线让 Sass 知道该文件只是一个部分文件，并且不应生成到 CSS 文件中。Sass 部分与 @use 规则一起使用。

模块模块永久链接

Dart Sass: 自 1.23.0 版起
LibSass: ✗
Ruby Sass: ✗

目前只有 Dart Sass 支持 @use。其他实现的用户必须改用 @import 规则。

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

  SCSS

  Sass

  CSS
SCSS 语法// _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 语法// _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 输出body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

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

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

MixinMixin 永久链接

CSS 中的一些东西写起来有点乏味，尤其是在使用 CSS3 和许多存在的供应商前缀时。Mixin 允许你创建要在整个站点中重用的 CSS 声明组。它有助于使你的 Sass 非常 DRY。你甚至可以传入值以使你的 Mixin 更灵活。以下是一个 theme 的示例。

  SCSS

  Sass

  CSS

       游乐场SCSS 语法@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);
}



       游乐场Sass 语法@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 输出.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，可以使用 @mixin 指令并为其命名。我们将 Mixin 命名为 theme。我们还在括号内使用变量 $theme，以便我们可以传入我们想要的任何 theme。创建 Mixin 后，你就可以将其用作以 @include 开头的 CSS 声明，后跟 Mixin 的名称。

扩展/继承扩展/继承永久链接

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

  SCSS

  Sass

  CSS

       游乐场SCSS 语法/* 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;
}

       游乐场Sass 语法/* 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






CSS 输出/* This CSS will print because %message-shared is extended. */
.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 从未扩展。

运算符运算符永久链接

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

  SCSS

  Sass

  CSS

       游乐场SCSS 语法@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;
}

       游乐场Sass 语法@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 输出.container {
  display: flex;
}

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

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

我们创建了一个非常简单的流体网格，基于 960px。Sass 中的操作允许我们执行诸如获取像素值并将它们转换为百分比之类的事情，而无需太多麻烦。