什么是 SASS
SASS（Syntactically Awesome StyleSheets）是一种流行的 CSS 预处理语言。它可以让前端开发者在编写 CSS 时更加高效和灵活。
与原始的 CSS 相比，SASS 提供了许多有用的功能，比如变量、嵌套、计算、混合等，可以简化 CSS 的编写过程，提高代码的可维护性和复用性。
安装和配置 SASS
要使用 SASS，需要先安装它。常用的安装方式是使用 Node.js 的包管理工具 npm。
npm install -g sass
安装完成后，就可以使用 SASS 的命令行工具编译 SASS 文件，生成对应的 CSS 文件。
SASS 的基础语法
变量
变量是 SASS 中最基础的概念之一。它允许开发者存储和重复使用某个值，比如颜色、字体、大小等等。
定义一个变量可以使用 $ 符号，后面跟上变量名和变量值，中间用冒号隔开。
$primary-color: #007bff; $secondary-color: #6c757d; $font-size-base: 1rem;
在其他样式中使用变量时，直接在变量名前面加上 $ 符号即可。
h1 {
color: $primary-color;
font-size: $font-size-base * 2;
}嵌套
SASS 允许样式声明嵌套，这样可以更加清晰和易读。和 HTML 的嵌套类似，样式的嵌套可以表示层级关系。
-- -------------------- ---- -------
--- -
-- -
----------- -----
------- --
-------- --
-- -
-------- -------------
------------- -----
- -
---------------- -----
------ ---------------
-
-
-
-计算
SASS 中可以使用基本的数学表达式，比如加、减、乘、除等等。
-- -------------------- ---- -------
---------- -
------ -----
---------- ------
------- - -----
------------- -----
-------------- -----
------ ------ --- ----------- ------ -
------------- -----
-------------- -----
-
-混合
有些样式代码可能会被重复使用，比如 CSS3 的前缀、动画等等。SASS 提供了混合（Mixin）的功能，可以让我们将这些代码封装起来，方便复用。
定义一个混合使用 @mixin 关键字，后面是混合名和混合参数，用括号括起来。混合参数可以有默认值，也可以是必填项。
@mixin border-radius($radius: 4px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}使用混合时，使用 @include 关键字，后面跟上混合名和混合参数。
.btn {
@include border-radius(20px);
background-color: $primary-color;
color: #fff;
padding: 10px 20px;
}总结
SASS 是一种强大的 CSS 预处理语言，可以帮助我们更快速、更高效地编写 CSS 代码。本文介绍了 SASS 的基本语法，包括变量、嵌套、计算和混合等方面。希望能够帮助大家更好地掌握 SASS 的使用技巧，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e69a46f6b2d6eab31f7a34