什麼是CSS變數？ CSS變數的學習：CSS變數的繼承&作用域
CSS變數能幫助我們做什麼
在一些命令式程式語言中，像是Java、C 亦然或是JavaScript，透過變數我們能夠追蹤某些狀態。變數是一種符號，關聯著一個特定的值，變數的值能隨著時間的推移而改變。
在像CSS這種宣告式語言中，隨著時間而改變的值並不存在，也就沒有所謂變數的概念了。
CSS 引入了一種層級變數的概念，從而能夠從容應對可維護性的挑戰。這會讓在整個CSS tree 中都可以像徵性的引用一個變數
一、什麼是CSS變數
CSS 變數目前有兩種形式：
##變數，就是擁有合法識別碼和合法的值。可以被使用在任意的地方。可以使用var()函數使用變數。例如：var(--example-variable)會傳回--example-variable所對應的值自訂屬性。這些屬性使用--
where的特殊格式作為名字。例如--example-variable: 20px;即使一個css宣告語句。意思是將20px賦值給--example-varibale變數
注意: 變數名稱大小寫敏感，
--header-color和--Header-Color是兩個不同變數
- 在css檔案中寫
- 寫在html標籤的inline-style裡
- 用JS給某個元素聲明，方法.style.setProperty
body{
--color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')--bar: 'hello';
--foo: var(--bar)' world';
body:after {
content: '--screen-category : 'var(--screen-category);
}.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}class="one">
<p class="two">
<p class="three">
</p>
<p class="four">
</p>
<p>
</p>.two { --test: 10px; }
.three { --test: 2em; }- class="two" 對應的節點: 10px
- class="three" 對應的節點: element: 2em
- class="four" 對應的節點: 10px (inherited from its parent)
- class="one" 對應的節點: 無效值, 即此屬性值為未被自訂css變數覆寫的預設值
p {
--color: #7F583F;
--bg: #F7EFD2;
}
.mediabox {
color: var(--color);
background: var(--bg);
}
@media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}登入後複製
五、與預處理器的不同1、預處理器變數不是即時的p {
--color: #7F583F;
--bg: #F7EFD2;
}
.mediabox {
color: var(--color);
background: var(--bg);
}
@media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}$color:#7F583F;
@media screen and (min-width: 768px) {
$color: #F7EFD2;
}
.mediabox {
background: $color;
}.mediabox {
background: #7F583F;
}$zcolor:blue;
.ulbox {
$zcolor:red;
}
ul{
color: $zcolor;
}ul {
color: blue;
}:root{
--testMargin:70px;
}
// 读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '70px'
// 写入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2); // '100px'
// 删除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '70px'/*css*/
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
// Js
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
alert('CSS properties are supported');
} else {
alert('CSS properties are NOT supported');
}- CSS 變數的動態性，能在頁面運行時更改，而傳統預處理器變數編譯後無法更改
- CSS 變數能夠繼承，能夠組合使用，具有作用域
- 配合Javascript 使用，可以方便的從JS 中讀/寫
以上是什麼是CSS變數？ CSS變數的學習：CSS變數的繼承&作用域的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
