目錄

一、CSS聲明全局變量

二、使用el plus 和 el ui的自帶樣式

1、element plus—— var.scss位置

2、element ui—— var.scss位置

三、修改el plus 和 el ui中的自定義樣式變量（方法一致）

本萌新最近在寫網(wǎng)頁時使用到了element plus中自帶的CSS全局樣式定義，本文將從CSS聲明全局變量的方法出發(fā)，記錄如何使用并自定義修改element plus（vue3） 和 element ui(vue 2) 自帶的樣式。其中也包含了一些對SCSS語言的初探。請各位多多指教~

一、CSS聲明全局變量

當(dāng)我們在寫CSS時，會遇到反復(fù)定義某些元素的同一屬性的同一屬性值，代碼重復(fù)高，并且若是要統(tǒng)一修改該屬性值也會顯得繁瑣。因此，我們CSS中也提供了方法，讓我們可以像其他語言類型一樣，將值統(tǒng)一儲存在某一變量中再調(diào)用。

那么這里就要介紹?:root? 和? var()?兩大“金剛”了。這是最為基礎(chǔ)和常用的組合。

1. :root 以偽類的形式，匹配了文檔樹中的根元素，通俗理解 :root 就對應(yīng) HTML元素 ，但會比HTML元素選擇器優(yōu)先級更高。不難理解，HTML作為我們其他元素的“爸爸”，所有CSS全局變量就應(yīng)該聲明在:root里面。
2. var()函數(shù)的含義，就是取得自定義屬性中的值，插入到我們寫的樣式表對應(yīng)的屬性中。

舉個栗子吧~

:root{
    --button-color:#fff;
    --div-margin-left:10px;
}

div{
    margin-left:var(--div-margin-left);
}

button{
    background-color:var(--button-color);
}

*注意：自定義屬性變量聲明時應(yīng)以 -- （雙短橫線）開頭，作為與其他屬性名稱的區(qū)分，符合CSS規(guī)范

二、使用el plus 和 el ui的自帶樣式

?那么對于element 庫中現(xiàn)成的一些變量我們?nèi)绾问褂媚?？以顏色為例使用為例~

首先我們需要找到element plus 和 element ui定義全局變量的文件在哪里，以便于使用查閱和自定義修改。

1、element plus—— var.scss位置

\node_modules\element-plus\theme-chalk\src\common 文件夾下

2、element ui—— var.scss位置

\node_modules\element-ui\packages\theme-chalk\src\common? 文件夾下

接下來以element plus為例簡要看看var.scss怎么定義的：

截取了文件中關(guān)于color部分的定義，如下圖：

• !default代表變量默認(rèn)值
• map.deep-merge（$map1,$map2） ，將兩個變量聲明的屬性和屬性值合并在一起，此處即將$type中定義的各個狀態(tài)（success、warning 等等）對應(yīng)的顏色值map和原生color的map合并起來
• 緊接著在color的基礎(chǔ)上定義具體的color樣式，就有了$color-white? $color-primary等等
• map.get（$map，key）方法用于像對象一樣，根據(jù)鍵值獲得map中對應(yīng)的屬性值。上圖就是用'white'? 'black'? 這種鍵值獲取到前面$colors中'white'? 'black'所對應(yīng)的顏色值。

了解到其如何定義之后，我們就將已經(jīng)定義好的用于自己的樣式中吧~

我們在main.js中全局引入element-plus（方法不贅述），再在自己的vue界面中引入，引入格式如下：

//隨便寫的例子，重點(diǎn)關(guān)注后面兩行
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

*注意：我們找到對應(yīng)的變量名例如$color-primary，但是在vue中使用需要加上 --el-? ，即最終為--el-color-primary才會生效

三、修改el plus 和 el ui中的自定義樣式變量（方法一致）

官網(wǎng)教程如下：

element-plus：主題 | Element Plus (element-plus.org)

element-ui：組件 | Element

總結(jié)起來就是三步走：

• 在assets（靜態(tài)資源）目錄下創(chuàng)建自定義的element-variables.scss文件，并且在main.js引入

• 按照第二大點(diǎn)中所介紹的路徑找到var.scss位置，查看庫里定義了哪些變量、哪些可以修改、代碼如何等等，在原變量基礎(chǔ)上修改內(nèi)容。
• 然后，在自定義scss文件中先導(dǎo)入原本的var.scss代碼，使用語句為：

?在該行代碼上方，寫入自己定義、修改的變量內(nèi)容?。?！

?

希望對你有幫助~~~文章來源地址http://www.zghlxwxcb.cn/news/detail-815537.html

到了這里，關(guān)于【CSS擴(kuò)展】VUE如何使用或修改element plus中自帶的CSS全局變量來定義樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！