Vue+Sass

Sass ⼊⻔

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

 使用

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

1、npm 安装

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

npm install sass

2、在组件<style>中进行配置

<style lang='scss' scoped>
 .outter {
 width: 200px;
 height: 200px;
 background-color: red;
 .inner {
 width: 100px;
 height: 100px;
 background-color: blue;
 }
 }
</style>

Sass 基础语法

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

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

/* scss */
#main p {
 color: #00ff00;
 width: 97%;
 .redbox {
 background-color: #ff0000;
 color: #000000;
 }
}

被编译成：

/* css */
#main p {
 color: #00ff00;
 width: 97%;
}
#main p .redbox {
 background-color: #ff0000;
 color: #000000;
}