前端常说的 SCSS是个啥玩意？一篇文章给你讲的明明白白！

0.邂逅 SCSS

我们在使用脚手架 Vue cli 或者 Vite 创建 Vue 项目的时候，会发现在 css 样式标签那里有一个 lang="scss" 的属性，那 scss 是什么玩意?

专业术语：SCSS 是一种预处理器语言，是 CSS 的一种扩展。

大白话： SCSS 就像是游戏中的 Buff，因为它支持定义变量、嵌套、混合等功能，所以它会让 CSS 变得更加强大，并且更容易维护。

使用 SCSS 这玩意之后，编译后的代码还是 CSS。

1. SCSS 核心知识点

1.1 变量

作用：主要用来存一些重复使用的值，比如尺寸、颜色等等。方便统一管理。

定义变量语法规则：以 ** <math xmlns="http://www.w3.org/1998/Math/MathML"> ∗ ∗ 开头，并且 ** 开头，并且 </math>∗∗开头，并且后面不能直接跟数字。

css 复制代码

// 定义变量
$bgColor: #a173f3;
$spaceSize: 20px;

// 使用变量
.header {
  background: $bgColor;
  padding: $spaceSize;
}

1.2 嵌套

作用：可以很直观的展示 html 结构层级关系，减少重复代码

scss 复制代码

.div {
  ul {
    li {
      display: block;
      a {
        color: red;
        &:hover {  // & 表示父选择器
          text-decoration: underline;
        }
      }
    }
  }
}

**注：**在 SCSS 中，& 符号用于引用父元素类名，实现嵌套规则的简化书写。例如：

css 复制代码

.father {
  &-container {
    margin: 66px;
  }
  &-text {
    font-size: 20px;
  } 
}

编译后对应的CSS代码为：

css 复制代码

.father-container {
   margin: 66px;
}
.father-text {
  font-size: 20px;
}

1.3 混合 (Mixins)

作用：就像 js 中的函数一样，是一个可以重复利用的样式代码块，并且支持参数。

@mixin 用来定义样式代码块，@include 用来使用样式代码块。

css 复制代码

// 定义 Mixin
@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

// 使用 Mixin
.button {
  @include border-radius(5px);
}

1.4 继承

作用：继承可以让一个选择器继承另一个选择器的样式。就是儿子继承爹的样式。

css 复制代码

// 定义基础样式
.father-style {
  color: $primary-color;
  font-size: $font-size;
}

// 继承样式
.son-style {
  @extend .father-style;
  font-size: 20px;
}

1.5 运算

作用：在 css 中对数值进行加减乘除操作

scss 复制代码

$base-size: 10px;

.header-content {
  font-size: $base-size * 3;  // 30px
  width: 100% - 40%;             // 60%
  padding: ($base-size / 5);     // 2px
}

1.6 函数

作用：SCSS 提供了一些内置函数，也可以自定义函数，用来计算值。

css 复制代码

// 使用内置函数
body {
  font-size: em(16px);
}

// 自定义函数
@function doubleTwo($num) {
  @return $num * 2;
}

// 使用自定义函数
.header {
  height: doubleTwo(66px);
}

1.7 条件与循环

作用：动态生成样式：if判断、for循环、each 遍历。

css 复制代码

// If 判断
@mixin myStyle($flag: false) {
  @if $flag {
    background: red;
    color: white;
  } @else {
    background: green;
     color: black;
  }
}

// For 循环
@for $i from 1 to 10 {
  .col-#{$i} { 
    width: 100% / $i; 
  }
}

// Each 遍历
$sizes: small, medium, large;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: if($size==large, 14px,20px);
  }
}

1.8 模块化

作用：就是根据一些功能拆分文件，便于统一管理和维护。例如你可以新建一个 myVariables.scss 文件，专门用来存储变量：

css 复制代码

// 定义变量
$primary-color: #3FAF60;
$background-color: red;
$font-size: 18px;

然后在另外一个 scss 文件中导入使用：

css 复制代码

@import "../scss/myVariables.css";
.button {
  padding: 15px;
  font-size: $font-size;
  background-color: $primary-color;
}

其实我们常用的做法是建一个 main.scss 文件，然后导入一些全局样式：

css 复制代码

// 导入基础样式
@import "base/variables";
@import "base/mixins";

// 导入组件样式
@import "components/button";
@import "components/card";

// 导入布局样式
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";

// 导入页面样式
@import "pages/home";
@import "pages/about";

// 导入主题样式
@import "themes/light";

2. 在 Vue 中使用 SCSS

其实我们使用的脚手架 Vue cli 或者 Vite 本身都集成了对 scss 语法的支持，只不过我们需要在项目中安装依赖：

css 复制代码

# Vue CLI 脚手架
npm install sass sass-loader@10 -D

# Vite 脚手架
npm install sass -D

安装依赖之后我们在 style 标签上面添加 lang="scss" 表示对 scss 的支持。另外我们通常会加上 scoped 属性表示这些样式只限制在本页面使用。

3. 答疑

3.1 sass 和 scss 什么关系？

我们在安装 scss 依赖时发现是 npm install sass。那 sass 和 scss 什么关系？

回答：

sass 和 scss 是同一种预处理器语言的不同语法版本，scss 是 Sass 的超集，兼容 sass 语法和 CSS 语法。

其实 CSS 最开始的预处理语言是 sass，后来 sass 3 版本引入了 scss 的语法扩展。说白了就是 scss 比 sass 更牛逼，更好用，但是 scss 基于 sass。所以你 npm install 的是 sass。

3.2 scss 和 css 到底什么关系

**回答：**SCSS 可以看作是增强版的 CSS，支持变量、嵌套、混合等一些非常高级的特性。