转载自：https://blog.csdn.net/qq_41694291/article/details/105529166

一、Sass/SCSS 使用简介

1. Sass 和 SCSS 的关系

没有用过 Sass 的人很可能会有这样一个疑惑，Sass 和 SCSS 是一个东西吗？

其实本文的标题已经给出了暗示，它们本质上是一个东西。具体来说，SCSS 是 Sass 版本 3 使用的语法。Sass 1.xx 和 Sass 2.xx 采用的是基于缩进的语法，如：

body
  color: red;
  font-size: 12px;

显然，这与 CSS 的写法有很大出入，原生 CSS 是下面这种基于大括号的语法：

body {
  color: red;
  font-size: 12px;
}

这也就意味着早期版本的 Sass 是不能直接兼容原生 CSS 的（即 CSS 代码直接粘贴进 Sass 文件无法编译）。很多前端开发者认为这种语法带来了使用上的不便，为此还催生了兼容原生 CSS 语法的 Less，并且抢占了 Sass 相当多的市场份额。

后来到了版本 3，Sass 团队决定改变之前的缩进风格，改为完全兼容 CSS3 语法的风格，同时把之前的文件后缀.sass改成.scss，以表明该版本已经完全兼容了 CSS3 语法。所以 SCSS 指代的是 Sass 从版本 3 之后开始使用的语法规范，本质上仍然是 Sass 框架。

鉴于 Sass 的版本 3 已经成为其主流版本，因此本文所介绍的内容都将基于 SCSS 语法，除了对一些早期项目维护的需求外，已经没有必要学习早期的 Sass 语法。

2. Sass 简介

从概念上来说，Sass 是一个 CSS 的预处理器，用于辅助进行 CSS 开发。

Sass 为 CSS 开发引入了变量、嵌套、运算、混入、继承、指令控制等一系列接近常规编程语言的语法特性，使得 CSS 开发变得更加简洁和高效。经过编译，Sass 代码可以被转化为原生的 CSS 代码。比如下面是一个符合 scss 语法的文件：

style.scss

.container .main-body {
  div {
    color: black;
  }
  p {
    font-size: 14px;
  }
}

这里div和p位于.container .main-body内表示它们是该选择器的子选择器，它会被编译为以下的 css 文件：

style.css

.container .main-body div {
  color: black;
}

.container .main-body p {
  font-size: 14px;
}

这种嵌套的写法不仅可以减少代码量，还可以清晰地表明它们的包含关系，使得代码的逻辑性更强，非常有利于提升 css 的开发效率。