SASS/SCSS一篇全通

背景介绍

SaSS全称syntactically awesome style sheets（中文翻译为“语法上很棒的样式表”），并且自喻为拥有超能力的CSS，听着就特别臭美。SaSS于2007年诞生，是对CSS的功能扩展，想要帮助开发者更轻松地，更高效的写样式表。

⚠️ 浏览器是无法直接理解SaSS的，我们需要一个编译器，把SaSS翻译成CSS。

SaSS的两套语法

SaSS开发了两种语法：

• 缩进语法 (Indented Syntax)：用缩进取代了冒号和花括号，文件后缀为*.sass
• ScSS语法(Superset Syntax是CSS的超集)，文件后缀为*.scss。是对 CSS语法的扩充。也就是说，所有符合 CSS语法的样式表也都是具有相同语法意义的 SCSS 文件。➡️ 主流

SaSS在本地的安装

与其他包一眼，我们可以用npm或者brew来安装：

• npm：npm install -g sass
• brew：brew install sass/sass/sass

两者达到的效果是一样的，都是本地环境的全局安装（在你电脑所以路径都能使用）。安装之后，我们就可以用sass命令行工具将sass编译成css文件了，比如：
sass index.scss index.css

参见[官方文档]{https://sass-lang.com/install}

SaSS在React项目的安装

本地安装时我们一般使用全局安装（global）。项目中sass更偏向于局部安装。比如在某个react项目中，我会用：
npm install sass
安装成功后我能在我react项目的package.json中看到：

---

ScSS的基础语法

因为scss是css的超集，所以所有css的语法在scss中都是有效的。在此之外，scss还提供了以下功能：

1. 变量（variable）

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
   
  font: 100% $font-stack;
  color: $primary-color;
}

⚠️ 现在的css语法中也有变量了（var(--blue);）

2. 嵌套（nesting）

特别适用大型项目。嵌套实现了代码的重用，并且大大提高了准确性。

nav {
   
  ul {
   
    margin: 0;
    padding: 0;
    list-style: none;
    li {
    
    	display: inline-block; 
    }
  }
}