溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關如何在css中如何定義使用變量，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
CSS中原生的變量定義語法是：--*，變量使用語法是：var(--*) ； 其中*表示我們的變量名稱;
vue項目中定義css全局變量的話：
1,首先在assets目錄下新建index.css文件：（
:root 文檔的根元素，這是一個放自定義屬性的好地方，因為我們可以根據其他個別特別的樣式的選擇性來覆蓋自定義屬性）
2，然后在main.js文件中引入：
3，使用：在 .vue文件中的style 中使用：
background:var(--baseBackground);
css中定義變量
定義變量可分多種情況：
1、定義全局變量
:root {
--borderColor: #ccc;
}
使用：width:var(--borderColor);
2、定義某元素下的變量
.look{
--borderColor: #ccc;
}
3、定義媒體查詢下的變量
@media screen and (min-width: 1025px) {
:root {
--borderColor: #ccc;
}
}
使用：
.has-border-table > tr > td {
border-right: 1px solid var(--borderColor);
}
less中定義變量
定義：
@bg-color : #d9d9d9;
使用：
.has-border-table > tr > td {
border-right: 1px solid var(@bg-color);
}
sass中定義變量
定義：
$bg-color : #d9d9d9;
使用：
.has-border-table > tr > td {
border-right: 1px solid var($bg-color);
}看完上述內容，你們對如何在css中如何定義使用變量有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
