SASS 是一种 CSS 预处理器，它可以让我们在编写 CSS 时使用变量、嵌套、函数等高级特性，让 CSS 编写更加方便、快捷、易于维护。本文将介绍如何从零开始学习 SASS，包括安装、配置及基础语法。
安装
SASS 的安装有两种方式：使用 Ruby 安装和使用 Node.js 安装。这里我们选择使用 Node.js 安装。
- 安装 Node.js
首先需要在电脑上安装 Node.js，可以从官网下载安装包进行安装。
- 安装 SASS
打开终端（Windows 用户可以使用 Git Bash 或者 PowerShell），输入以下命令进行 SASS 的安装：
npm install -g sass
配置
安装完成后，我们需要配置 SASS 的编译环境，使其能够将 SASS 文件编译成 CSS 文件。这里我们使用 VS Code 作为代码编辑器。
- 安装插件
打开 VS Code，进入插件商店，搜索并安装 "Live Sass Compiler" 插件。安装完成后，重启 VS Code。
- 配置插件
打开 VS Code 的设置（快捷键：Ctrl + ,），在搜索框中输入 "live sass compiler"，找到 "Live Sass Compiler: Settings"，点击 "Edit in settings.json"。在打开的文件中添加以下配置：
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
]这里我们将编译后的 CSS 文件保存在项目根目录下的 css 文件夹中。
基础语法
变量
SASS 允许我们定义变量来存储颜色、字体、大小等属性值。变量以 "$" 开头，例如：
$primary-color: #3498db; $font-size: 16px;
在后面的样式中，可以使用变量来代替属性值，例如：
h1 {
color: $primary-color;
font-size: $font-size;
}嵌套
SASS 允许我们使用嵌套来组织样式，让代码更加清晰易读。例如：
-- -------------------- ---- -------
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
- -
---------------- -----
-------- ----
------- -
----------------- ---------------
------ -----
-
-
-
-
-混合
SASS 允许我们使用混合来定义一组样式，然后在需要使用的地方进行调用。混合以 "@" 开头，例如：
-- -------------------- ---- -------
------ ------------------------- ------- -
-------- -------------
-------- ---- -----
----------------- ------------------
------ -------
-------------- ----
------- -
----------------- ------------------------- -----
-
-
------------ -
-------- ---------------------- ------
-
-------------- -
-------- ------------ ------
-继承
SASS 允许我们使用继承来重用样式。例如：
-- -------------------- ---- -------
---- -
-------- -------------
-------- ---- -----
-------------- ----
-
------------ -
------- -----
----------------- ---------------
------ -----
------- -
----------------- ---------------------- -----
-
-
-------------- -
------- -----
----------------- -----
------ -----
-运算
SASS 允许我们使用运算符进行数值计算。例如：
.container {
width: 100% / 3;
}函数
SASS 内置了许多函数，可以帮助我们进行颜色、数值等的处理。例如：
.btn-primary {
background-color: lighten($primary-color, 10%);
color: complement($primary-color);
}总结
本文介绍了 SASS 的安装、配置及基础语法，包括变量、嵌套、混合、继承、运算和函数等。SASS 可以让我们在编写 CSS 时更加方便、快捷、易于维护，是前端开发中必不可少的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a6c35eb4cecbf2df9b1ac