Sass 简介

你应该已经知道什么

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

HTML
CSS

如果您想先学习这些主题，请在我们的网站上找到教程主页。

什么是Sass？

Sass代表S语法上A威瑟姆S风格s希特
Sass 是 CSS 的扩展
Sass 是一个 CSS 预处理器
Sass 完全兼容所有版本的 CSS
Sass 减少了 CSS 的重复，从而节省了时间
Sass 由 Hampton Catlin 设计，由 Natalie Weizenbaum 于 2006 年开发
Sass 可免费下载和使用

为什么使用 Sass？

样式表变得越来越大、越来越复杂并且更难维护。这就是 CSS 预处理器可以提供帮助的地方。

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

Sass 有用的一个简单例子

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

#a2b9bc

#b2ad7f

#878f99

那么，您需要输入这些十六进制值多少次？很多时间。那么相同颜色的变化又如何呢？

您可以使用 Sass 并编写以下内容，而不是多次输入上述值：

Sass 示例

/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* use the variables */
.main-header {
background-color: $primary_1;
}

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

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

所以，当使用Sass时，当原色发生变化时，只需要改变一处即可。

Sass 是如何工作的？

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

这个过程称为转译。因此，您需要为转译器（某种程序）提供一些 Sass 代码，然后返回一些 CSS 代码。

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

Sass 文件类型

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

Sass注释

Sass 支持标准 CSS 注释/* comment */，此外它还支持内联注释// comment:

Sass 示例

/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */
.main-header {
background-color: $primary_1; // here you can put an inline comment
}