Vue+Sass

Sass ⼊⻔

Sass (英⽂全称：Syntactically Awesome Stylesheets) 是⼀个最初由 Hampton Catlin 设计并由

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

特⾊功能

完全兼容 CSS3

● 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能

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

提供了控制指令 (control directives)等⾼级功能

⾃定义输出格式

我们为什么要使⽤ Sass？

CSS 本身语法不够强⼤，导致重复编写⼀些代码，不仅⽆法实现复⽤，⽽且代码也不⽅便维护。

Sass 可以理解为是⼀个 CSS 的预处理器，可以帮我们减少 CSS 的重复代码，提⾼开发效率。

语法格式

Sass 有两种语法格式。

sass

Sass 语法格式，即缩进格式 (Indented Sass)， ⼀般简称为 "Sass"，是⼀种简化格式。这种语法的特 点是 使⽤ “缩进” 代替 “花括号” 表示属性属于某个选择器，⽤ “换⾏” 代替 “分号” 分隔属性，很多 ⼈认为这样做⽐ SCSS 更容易阅读，书写也更快速。缩进格式也可以使⽤ Sass 的全部功能，只是与SCSS 相⽐个别地⽅采取了不同的表达⽅式，具体请查看 the indented syntax reference 。这种格式 以 .sass 作为扩展名。

scss

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

转换成另⼀种格式：

使⽤

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

1、npm 安装

npm install sass

2、在组件<style>标签中配置

Sass 基础语法

SassScript

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

嵌套规则

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

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