一、使用简介
1.1、技术栈:nuxt3 + ts
1.2、安装:
pnpm add sass sass-loader -D
1.3、代码中style标签中加入 lang="scss"
![](https://i-blog.csdnimg.cn/blog_migrate/3fc0dde198a4fab08580069366d22900.png)
1.4、文件后缀为: .scss
![](https://i-blog.csdnimg.cn/blog_migrate/449585cd8f50a85d9a4012be1b774dd6.png)
二、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文件直接在这里引用,样式可以使用,但是变量、函数等不能使用。
![](https://i-blog.csdnimg.cn/blog_migrate/eef9149b4f4b7a1fcf789e7e757ee624.png)
尝试在这里引用
![](https://i-blog.csdnimg.cn/blog_migrate/fd3d76873c6a3513faf044729be8fc9f.png)
出现报错如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/3631c5bd74885df7d73c9a2e30983408.png)
解决问题:
css: {
preprocessorOptions: {
scss: {
additionalData: [
'@use "~/assets/scss/global.scss" as *;',
]
}
}
}
六、欢迎交流指正,关注我,一起学习。
参考链接:
关于vue中媒体查询不起效的原因总结 - 爱码帮™分享编程知识和开发经验
rem结合scss解决移动端自适应大小_scss怎么获取根字体大小_Mo_zifeng的博客-CSDN博客
vue3 + vite引入scss全局变量_vite additionaldata_codingFunTime的博客-CSDN博客
http://events.jianshu.io/p/c84557b6a903
https://www.cnblogs.com/lovewhatIlove/p/16868062.html