Vue3项目中reset.scss模板使用导入
作者：ClearBoth
这篇文章主要为大家介绍了Vue3项目中reset.scss模板使用导入示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
变量css模板
theme.scss
//导入字体包
@font-face {
font-family: SYHTHea;
src: url('../font/SourceHanSansSC-Heavy_0.otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: SYHTLgt;
src: url('../font/SourceHanSansSC-Light_0.otf');
font-weight: normal;
font-style: normal;
}
$background:#000000;变量式样式
项目中需要用到的变量式样式随时再此文件中增加 reset.scss
@import "./theme.scss";
// 统一浏览器默认标准盒子模型
// 全局使用字体包
html{
box-sizing: content-box;
font-family: SYHTHea;
}
// 清除标签默认间距
html,
body,
div,
span,
applet,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
}
/* 旧版本浏览器对H5新标签兼容处理 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
// 清除标签默认样式
ol,
ul,
li {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
// 表格重置
table {
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
vertical-align: middle;
}
/* 全局自定义标签样式 */
a {
outline: none;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
a:focus {
outline: none;
}
input:focus,
select:focus,
textarea:focus {
outline: -webkit-focus-ring-color auto 0;
}
// 滚动条样式
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba($color: #ffffff, $alpha: 0.7);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.3);
&:hover {
background-color: rgba(0, 0, 0, 0.53);
cursor: pointer;
}
}结语
最后在main.js或者app.vue中引用就可以了
import "./assets/styles/reset.scss";
以上就是Vue3项目中reset.scss模板使用导入的详细内容，更多关于Vue3 reset.scss模板的资料请关注脚本之家其它相关文章！