背景：

项目中总有很多界面 需要做大小屏幕适配的兼容，那么怎么能够快速实现这一方案呢，SASS的出现是个非常好用的工具，可以通过自定义函数，来实现自动计算。

方案：vue3 + vite + sass

具体实现细节：

1. 创建utils.scss 文件，我的项目中路径 为： src\styles\utils.scss；
2. 配置vite.config.js ,实现utils.scss的全局注册
3. 就可以在每个vue文件中快乐的使用了

具体代码： 

1. utils.scss文件如下：

//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div@use "sass:math";//默认设计稿的宽度
$designWidth :1920;
//默认设计稿的高度
$designHeight: 1080;//px转为vw的函数@function vw($px) {@return math.div($px, $designWidth) * 100vw;
}//px转为vh的函数@function vh($px) {@return math.div($px, $designHeight) * 100vh;
}

2. vite.config.js 文件如下：

export default defineConfig({```css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/utils.scss";`}}},```})

3. vue中的使用方式： 直接使用vw设置宽度，vh设置高度即可，不需要添加px,直接写数值！！！

         img {width: vw(130);height: vh(64);}