vue3第三十节（vue3 vite中使用sass）
引言：什么是Sass?
Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，提供了更高级的语法和特性，例如变量、嵌套、混合、继承和颜色功能等，这些特性可以帮助开发者更高效地管理和维护样式表。Sass语法是基于缩进（缩进花括号）的，它与传统的CSS语法类似，但添加了一些额外的规则和语法结构。Sass代码需要编译成CSS代码才能在浏览器中呈现。
Sass 有什么好处呢？
Sass让编写可维护的CSS更加简易方便。可以用更少的代码，做更多的事，用更少的时间，具有更强的可读性
比如全局定义的样式，变量，可以统一修改，避免重复书写样式
一、安装Sass
使用vite 创建好 vue 项目
vite 项目中只需要安装 sass 即可，不像 webpack项目 需要安装 node-sass sass-loader;
执行如下命令 npm i sass --save-dev
二、使用Sass
安装完成后便可以在项目中使用Sass，
需要在style标签中设置lang属性为scss
如：
<style scoped lang="scss">.container{width: 100%;height: auto;}
</style>
三、配置Sass全局共享变量
1.配置全局
Sass中我们可以自定义变量，一些变量往往是全局共享的，为了方便我们可以在vite.config.js中defineConfig里面添加配置如下：
自定义全局样式文件：varibles.scss
css: {// css预处理器preprocessorOptions: {scss: {// 引入 varibles.scss 这样就可以在全局中使用 varibles.scss中预定义的变量了// 给导入的路径最后加上 ; additionalData: '@import "@/assets/style/varibles.scss";'}}}
@import "@/assets/style/varibles.scss" 为自己定义的全局css 样式
如下：
1、定义的全局变量
:root {--GBrand: #0084FF;--GBrandHover: #1F93FF;--GBaseL1: #28374F;// ...
}
也可以直接使用 $ 符号定义变量
如：
$barndColor: #0084FF;
$waringColor:#FF9200;
// 全局mixin
@mixin box-shadow($bulr: 20px, $color: #AAB1BD) {-webkit-box-shadow: 0px 0px $bulr $color;-moz-box-shadow: 0px 0px $bulr $color;box-shadow: 0px 0px $bulr $color;
}
不同的定义方式，最好是分开文件声明，不要混淆在一个文件中，便于后期维护
使用方法：
<style scoped lang="scss">.main-container{color: var(--GBrand);background--color: $barndColor;&-title{/* sass 嵌套样式 */color: var(--GBaseL1);}}
</style>
// 编译后为 data-v-xxxx 为 vue 中样式表自动生成的hash 值
.main-container [data-v-xxxx]{color: #0084FF;background-color: ##0084FF;
}
.main-container .main-container-title[data-v-xxxx]{color: #28374F;
}
2.不配置全局，单独引入
在单个使用文件中引入
<style scoped lang="scss">@import '@/assets/style/varibles.scss'
</style>
3、数学计算
Sass允许使用数学表达式！这对于混合宏非常有用，是我们能够使用自己的标记做一些很酷的事情。
支持的操作符有：
加：+
减：-
除：/
乘：*
取余：%
相等：==
不相等：!=
两个Sass有关于数学计算的“陷阱” /符号用来简写CSS字体属性，比如font: 12px/18px，所以如果你想在非变量值上使用除法操作符，那么你需要使用括号包裹它们：
$fontSizeDiff: (14px/16px);
不能混合使用值的 单位
$container-width: 100% - 20px;
基于基础的容器宽度创建一个动态列
$container-width: 100%;
.container {width: $container-width;
}
.col-4 {width: $container-width / 4;
}
// 编译后是这样的
// .container {
// width: 100%;
// }
//
// .col-4 {
// width: 25%;
// }
以上仅代表个人观点，若有错误之处，欢迎批评指正