Vue3項目中reset.scss模板使用導入
更新時間:2023年09月05日 15:59:35 作者: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";
// 統(tǒng)一瀏覽器默認標準盒子模型
// 全局使用字體包
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;
}
/*定義滾動條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba($color: #ffffff, $alpha: 0.7);
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-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;
}
}結(jié)語
最后在main.js或者app.vue中引用就可以了
import "./assets/styles/reset.scss";
以上就是Vue3項目中reset.scss模板使用導入的詳細內(nèi)容,更多關于Vue3 reset.scss模板的資料請關注腳本之家其它相關文章!
相關文章
前端vue3使用axios調(diào)用后端接口的實現(xiàn)方法
vue本身不支持ajax接口的請求,所以在vue中經(jīng)常使用axios這個接口請求工具,下面這篇文章主要給大家介紹了關于前端vue3使用axios調(diào)用后端接口的實現(xiàn)方法,需要的朋友可以參考下2022-12-12
如何使用uniapp內(nèi)置組件webview消息傳遞詳解
uni-app的web-view組件用于在應用中打開網(wǎng)頁,并支持應用和網(wǎng)頁之間的消息傳遞,這篇文章主要介紹了如何使用uniapp內(nèi)置組件webview消息傳遞的相關資料,需要的朋友可以參考下2025-02-02
在UniApp中使用WebView實現(xiàn)雙向通信完整代碼
這篇文章主要介紹了在UniApp中使用WebView實現(xiàn)雙向通信的相關資料,適用于需調(diào)用不支持的API(如文件上傳)的場景,包含Vue與HTML間的數(shù)據(jù)交互及調(diào)試技巧,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-06-06
vue3使用localStorage實現(xiàn)登錄注冊功能實例
這篇文章主要給大家介紹了關于vue3使用localStorage實現(xiàn)登錄注冊功能的相關資料, localStorage這個特性主要是用來作為本地存儲來使用的,解決了cookie存儲空間不足的問題,需要的朋友可以參考下2023-06-06

