Sass 简介

您应该知道的

在继续之前，您应该对以下内容有基本的了解：

  • HTML
  • CSS

如果您想先学习这些科目，请在我们的 主页 上访问这些教程。

什么是 Sass？

  • Sass 指的是 Syntactically Awesome Stylesheet（语法超棒的样式表）
  • Sass 是一种 CSS 扩展
  • Sass 是一种 CSS 预处理器
  • Sass 完全兼容所有版本的 CSS
  • Sass 减少了 CSS 的重复，从而节省了时间
  • Sass 由 Hampton Catlin 设计，并由 Natalie Weizenbaum 于 2006 年开发
  • Sass 可以免费下载和使用

为什么要使用 Sass？

样式表越来越大、越来越复杂，也越来越难维护。这是 CSS 预处理器可以提供帮助的地方。

Sass 允许您使用 CSS 中不存在的特性，比如变量、嵌套规则、mixin、导入、继承、内置函数和其他功能。

一个关于 Sass 很有用的简单例子

假设我们有一个具有三种主要颜色的网站：

#a2b9bc
#b2ad7f
#878f99

那么，您需要键入这些 HEX 值多少次？很多次。如果相同的颜色发生变化呢？

您可以使用 Sass 写以下代码，而不是多次键入上面的值：

Sass 实例

/* 为原始颜色定义变量 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* 使用变量 */
.main-header {
  background-color: $primary_1;
}

.menu-left {
  background-color: $primary_2;
}

.menu-right {
  background-color: $primary_3;
}

所以，在使用 Sass 的时，如果原始颜色发生变化，你只需要在一个地方更改它。

Sass 是如何工作的？

浏览器不理解 Sass 代码。因此，您需要一个 Sass 预处理器来将 Sass 代码转换为标准 CSS。

这个过程称为转译（transpiling）。所以，您需要为转译器（某种程序）提供 Sass 代码，然后取回 CSS 代码。

提示：转译是一个术语，用于将用一种语言编写的源代码转换/翻译成另一种语言。

Sass 文件类型

Sass 文件的文件扩展名是 ".scss"。

Sass 评论

Sass 支持标准的 CSS 注释 /* comment */，此外还支持行内注释 // comment：

Sass 实例

/* 定义主要的颜色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* 使用变量 */
.main-header {
  background-color: $primary_1; // 您可以在这里添加行内的评论
}