Sass是什么

Sass是什么

Sass 是⼀种强化 CSS 的辅助性的⼯具，在 CSS 原本的语法 基础上增加了变量 、嵌套、混合、导⼊等⾼级功 能，通过这些扩展能够让 CSS 更加优雅、强⼤。我们通过 Sass 和 Sass 的样式库有助于更好地组织管理样式⽂件，以便⾼效地开发项⽬。

特⾊功能

完全兼容CSS3

在CSS 基础上增加变量、嵌套、混合等功能

⽀持通过函数进⾏颜⾊值与属性值的运算

提供了控制指令等⾼级功能

⾃定义输出格式

我们为什么要使⽤****Sass？

CSS 本身语法不够强⼤，导致重复编写⼀些代码，不仅⽆法实现复⽤，⽽且代码也不⽅便维护。Sass 可以理解为是⼀个 CSS 的预处理器，可以帮我们减少 CSS 的重复代码，提⾼开发效率

语法格式

Sass 有两种语法格式。

Sass

Sass 语法格式，即缩进格式， ⼀般简称为 "Sass"，是⼀种简化格式。这种语法的特点是使⽤

“缩进” 代替 “花括号” 表示属性属于某个选择器，⽤ “换⾏” 代替 “分号” 分隔属性

Scss

SCSS语法格式， 这种语法格式是仅在 CSS3 语法的基础上进⾏拓展的，所有 CSS3 语法在SCSS 中都是通⽤的，同时加⼊ Sass 的特⾊功能。这种格式以.scss作为扩展名。对于任何⼀种格式，我们都可以直接导⼊到另⼀种格式中使⽤，通过sass-convert命令⾏⼯具来转换成另⼀种格式.

使用

Vite+Vue项⽬中如何引⼊sass并使⽤

1、npm 安装

我们可以通过npm 命令来完成 Sass 的安装：

1npm install sass

2、在组件标签中配置

Sass 基础语法

SassScript

在CSS 属性的基础上， Sass 提供了⼀些名为 SassScript 的新功能。 SassScript 可作⽤于任何属性，允许属性使⽤变量、算数运算等额外功能。

嵌套规则

npm install sass 1

嵌套规则

Sass 允许我们将⼀套 CSS 样式嵌套进另⼀套样式中，那么 内层的样式就会将它外层的选择器作为⽗选择器。

嵌套功能够避免重复输⼊⽗选择器，⽽且令复杂的CSS 结构更易于管理。

父选择器

在嵌套CSS 规则时，有时也需要直接使⽤嵌套外层的⽗选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以 ⽤ & 代表嵌套规则外层的⽗选择器。编译后的CSS ⽂件中 & 将被替换成嵌套外层的⽗选择器，如果含有多层嵌套，最外层的⽗选择器会⼀层⼀层向下传递

注意：

& 必须作为选择器的第⼀个字符，其后可以跟随后缀⽣成复合的选择器。

属性嵌套

有些CSS 属性遵循相同的命名空间 (namespace)，⽐如 font-family，font-size，font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输⼊，Sass 允许将属性嵌 套在命名空间中。命名空间也可以包含⾃⼰的属性值

注释**:Sass ⽀持标准的 CSS 多⾏注释 / /，以及单⾏注释 //，前者会 被完整输出到编译后的 CSS ⽂件中，⽽后者则不会.**

插值语句

我们可以通过插值语句#{ } 在注释中插⼊变量。

变量

SassScript 最普遍的⽤法就是变量，变量以美元符号 $ 开头（与PHP中定义变量的⽅式相同），赋值⽅法与 CSS 属性的写法⼀样

作用域

变量⽀持块级作⽤域，嵌套规则内定义的变量只能在嵌套规则内使⽤，即局部变量，不在嵌套规则内定义的变量则可在任何地⽅使⽤，即全局变量。那么默认情况下，所有定义在任何选择器之外的变量被认为是全局变量。这意味着他们可以在样式表中任意地⽅被访问。

Vue项⽬中使⽤全局变量

⽅式⼀：单⽂件引⼊使⽤

在项⽬src/assets/下创建style⽂件夹，⽂件夹中variable.sass，可以在其中加⼊⼀些全局变量

⽅式⼆：全局配置使⽤

在vite.config.js中配置全局变量的⽂件

Mixin

当使⽤Sass 在 Vue 项⽬中，Mixin 和函数是⾮常有⽤的功能，可以帮助你更好地组织和重⽤样式代码。Mixin 允许你在多个选择器之间共享⼀组属性，这在需要应⽤相同样式但不想使⽤类名的情况下⾮常有⽤。Mixin 可以包含 CSS 属性、选择器等。

函数

Sass 也⽀持函数，允许你创建可重⽤的样式计算⽅法，使样式更加动态和灵活。