SASS/SCSS一篇全通

• 背景介绍
• • SaSS的两套语法
  • SaSS在本地的安装
  • SaSS在React项目的安装
• ScSS的基础语法
• • 1. 变量（variable）
  • 2. 嵌套（nesting）
  • 3. 模块（modules）
  • • @use VS @import
  • 4.扩展/继承（extend/inheritance）
  • 5. 混入（mixins）
  • • 混入 vs 扩展/继承
    • 应用场景
  • 6.数学操作符（operators）
• ScSS的内置函数
• • 1. 字符串相关函数（string）
  • 2. 数字相关函数（numeric）
  • 3. 数组相关函数（list）
  • 4. 映射函数（map）

背景介绍

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;     }  }}

3. 模块（modules）

模块使不同的scss文件可以相互引用

// _base.scss$font-stack: Helvetica, sans-serif;$primary-color: #333;body {  font: 100% $font-stack;  color: $primary-color;}

使用关键词@use，我们可以在styles.scss文件中引用_base.scss，比如某个变量base.$primary-color

// styles.scss@use 'base';.inverse {  background-color: base.$primary-color;  color: white;}

⚠️注意到_base.scss文件名前面的下划线了吗？它的存在是有意义的：
一般来说，Sass 直接编译所有 *.scss 文件。 但是，当你导入文件时，你并不希望scss文件被编译成css。不然的话，像变量base.$primary-color之类的东西都没法用了 ！
➡️ 像_base.scss这样的文件被称为 Partials（部分）

⚠️注意到我们使用_base.scss时只提了base吗
Sass 默认对 Partials的使用需要忽视下划线，

@use VS @import

从根本上说，@use和@import这个语法都做同样的事情 --> 在另一个模块中加载另一个模块。

• @import 使目标文件中的所有内容都可以全局访问。 这使得导入文件的链无穷无尽，很难追踪变量和 mixin 的来源。@import还允许规则重写，并且很难追溯完美的 CSS 中断的原因 ➡️ 这就是SaSS不再推荐使用 @import 的原因。
• @use 规则使我们能够将样式表分解为更实用、更小的部分，并将它们加载到其他样式表中。用法中最重要的就是 Partials

4.扩展/继承（extend/inheritance）

又是一个提高代码重用率的宝宝。
首先，用百分号%定义要被继承的父样式shared

%shared {font-family: sans-serif;font-size: medium;color: white;}

使用：

// 不对父样式进行任何修改.text {@extend %shared;}// 以下两个选择器继承并扩展了父样式：.warning {@extend %shared;background-color: red;}.success {@extend %shared;background-color: green;}

⚠️ 父样式%xxx的内容不会 单独 被编译成css，无论它是否被用到。上面的scss代码编译之后应该长这样：

.text {font-family: sans-serif;font-size: medium;color: white;}.warning {font-family: sans-serif;font-size: medium;color: white;background-color: red; // ⬅️ 扩展}.success {font-family: sans-serif;font-size: medium;color: white;background-color: green; // ⬅️ 扩展}

5. 混入（mixins）

混入的目的是提高代码重用，特别适用于写“主题”。主要与两个关键词相关@mixin和@include。

假设我要建一个类似wordpress的网站。我想要我的整个网页有一致的设计和颜色搭配，比如导航栏（navigator），弹出框（modal）。首先，定义一个名为myTheme的mixin

@mixin myTheme {  background-color: lightpink;  font-size: 25px;  font-weight: bold;}

使用mixin：

.navigator {  @include myTheme;}// 使用+扩展.modal {  @include myTheme;  border: 1px solid blue;}

❓问：这个混入和 **扩展/继承（extend/inheritance）**有什么区别，为什么需要他们同时存在？
❗️答：混入更强大，因为它能使用变量

混入 vs 扩展/继承

假设我要建一个类似wordpress的网站，这个网站中应该又很多不同的主题供用户选择。与函数类似，我们先定义一个mixin的模版，名为theme。并为参数定义默认值

@mixin theme($color: lightpink, $size: 25px) {background-color: $color;font-size: $size;font-weight: bold;}

在使用时，我们对mixin的模版进行传参，重写覆盖默认值：

// 使用原有的默认值.navigator {  @include theme;}// 传入新值，覆盖默认值.new-navigator {  @include theme($color: darkorange, $size: 20px);  border: 1px solid blue;}

应用场景

TODO

除了我们距离用到的网页主题之外，还有一种用法也很常见，那就是vendor prefixes - 用mixins来声明浏览器相关的属性。举例：

@mixin transform($property) {  -webkit-transform: $property;  -ms-transform: $property;  transform: $property;}.myBox {  @include transform(rotate(20deg));}

6.数学操作符（operators）

包括加（+）减（-）乘（*）除（math.div()），和取整（%）。在使用前要先导入math的包

@use "sass:math";article[role="main"] {  width: math.div(600px, 960px) * 100%;}

ScSS的内置函数

1. 字符串相关函数（string）

…用于操作和获取有关字符串的信息。
⚠️ Sass 字符串是从 1 开始数的！

2. 数字相关函数（numeric）

3. 数组相关函数（list）

4. 映射函数（map）