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%;
//  }

以上仅代表个人观点，若有错误之处，欢迎批评指正