一、使用简介
1.1、技术栈：nuxt3 + ts
1.2、安装：
pnpm add sass sass-loader -D
1.3、代码中style标签中加入 lang="scss"
1.4、文件后缀为： .scss
二、reset.scss
代码文件：/assets/scss/reset.scss
$minWitdh:1200px; $BaseColor:#666; $LinkColor:#06f; $HoverColor:#f60; $FontSize:14px; body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p,blockquote,table,th,td,menu{margin:0;padding:0}; table{border-collapse:collapse;border-spacing:0;table-layout:fixed} ul,ol,menu{list-style:none} fieldset,img{border:none} img,object,select,input,textarea,button{vertical-align:middle} input,textarea,select,address,caption,cite,code,dfn,em,i,b,strong,small,th,var,abbr{font-size:100%;font-style:normal} caption,th {text-align: left;} article,aside,footer,header,hgroup,nav,section,figure,figcaption {display: block;} code, kbd, pre, samp, tt { font-family: Consolas,"Courier New", Courier, monospace;} address, cite, dfn, em, var,i {font-style: normal;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content:"";content: none;} a { color:$LinkColor; text-decoration:none;cursor: pointer; &:link,&:visited, &:active{color: $LinkColor;} &:hover, &:focus {color:$HoverColor; text-decoration:underline;outline:none;} &,span,i,em,u,strong,b,p,img,ul,li,div,dd,dt,dl,ol,table,th,td,h1,h2,h3,h4,h5,h6,input,textarea,button,small,select { cursor: pointer;} } abbr[title], acronym[title] {border-bottom: 1px dotted;cursor: help;} html {min-width:$minWitdh;overflow-y: scroll;} body {font-size: $FontSize;color: $BaseColor;line-height: 2;} body,button, input, select, textarea {font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";*font-family:"\5FAE\8F6F\96C5\9ED1";} h1 {font-size: $FontSize+10;} h2 {font-size: $FontSize+8;} h3 {font-size: $FontSize+6;} h4 {font-size: $FontSize+4;} h5 {font-size: $FontSize+2;} h6 {font-size: $FontSize;} hr {border: none;height: 1px;background: lighten($BaseColor,50%);} .fl {float: left;} .fr {float: right;} .tl {text-align: left;} .tr {text-align: right;} .tc {text-align: center;} .cf:before, .cf:after,.web:before, .web:after,.web_:before, .web_:after {content:"";display:table;} .cf:after,.web:after,.web_:after {clear:both;} .cf {zoom:1;} .web {width: $minWitdh;margin-left: auto;margin-right: auto;zoom:1;} .web_ {min-width:$minWitdh;width: 100%;zoom: 1;} .block {display: block;} .none {display:none} .clear {clear: both; }
三、sass 定义rem函数
原理：通过设置根元素的基准值，来响应不同分辨率的屏幕。
assets/scss/global.scss
@use "sass:math"; @import 'reset'; // 这个值在媒体查询里边动态设置，但是不是很流畅，有待探索 $fontSize: 37.5; @function px2rem($px) { @return math.div($px, $fontSize) * 1rem; }
pages/media.vue
<!-- 测试媒体查询 --> <template> <div> <h1>media</h1> <div class="div1">test</div> <div class="div2">test2</div> </div> </template> <script setup lang="ts"> </script> <style scoped lang="scss"> // 小于1000 @media screen and (max-width: 1000px) { $FontSize: 30px; // 失败 body { background-color: red; } // 成功 h1{ color: green; } // 成功 .div1{ font-size: $FontSize; } .div2{ font-size: px2rem(60); } } // 1000到1500 @media screen and (min-width: 1000px) and (max-width: 1500px) { $FontSize: 50px; // 失败 body { background-color: yellow; } // 成功 h1{ color: green; } // 成功 .div1{ font-size: $FontSize; } .div2{ font-size: px2rem(100); } } </style>
经过测试成功，但是不流畅，不推荐。
四、个人观点
本文项目pc端与移动端在一个项目，pc直接使用px，移动端使用px2rem，通过sass的函数方法已实现，针对不同分辨率设置rem的基准值。但是，这样个人认为不是很好，不能实时的体现屏幕的变化。欢迎交流指正。
五、过程记录：
问题一：
reset.scss、global.scss文件直接在这里引用，样式可以使用，但是变量、函数等不能使用。
尝试在这里引用
出现报错如下图：
解决问题：
css: { preprocessorOptions: { scss: { additionalData: [ '@use "~/assets/scss/global.scss" as *;', ] } } }
六、欢迎交流指正，关注我，一起学习。
