前端必知必会-Sass简介与安装

---

Sass 简介

什么是 Sass？

Sass 代表 Syntactically Awesome Stylesheet
Sass 是 CSS 的扩展
Sass 是 CSS 预处理器
Sass 与所有版本的 CSS 完全兼容
Sass 减少了 CSS 的重复，因此节省了时间
Sass 由 Hampton Catlin 设计，由 Natalie Weizenbaum 于 2006 年开发
Sass 可以免费下载和使用

为什么使用 Sass？

样式表越来越大、越来越复杂，而且越来越难维护。这时 CSS 预处理器可以提供帮助。

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

一个简单的例子来说明 Sass 为何有用

假设我们有一个包含三种主色的网站：

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

您无需多次输入上述值，而是可以使用 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。

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

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

Sass 文件类型

Sass 文件具有“.scss”文件扩展名。

Sass 注释

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

Sass 示例

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

/* 使用变量 */
.main-header {
background-color: $primary_1; // 您可以在此处添加内联注释
}

Sass 安装

Sass 的系统要求
操作系统 - Sass 独立于平台
浏览器支持 - Sass 可在 Edge/IE（从 IE 8 开始）、Firefox、Chrome、Safari、Opera 中使用
编程语言 - Sass 基于 Ruby
官方 Sass 网站
在官方 Sass 网站上阅读有关 Sass 的更多信息：https://sass-lang.com/

安装 Sass

有几种方法可以在您的系统中安装 Sass。有许多应用程序可以让您在几分钟内启动并运行适用于 Mac、Windows 和 Linux 的 Sass。其中一些是免费的，但有些是付费应用程序。您可以在此处阅读有关它们的更多信息：sass-lang.com/install

---

总结

本文介绍了Sass简介与安装的使用，如有问题欢迎私信和评论