公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

CSS 自定義屬性是現代 CSS 中非常有用的功能，它允許開發者在樣式表中創建可重用的值，從而提高樣式表的可維護性和靈活性。通過 var() 函數，可以在 CSS 中定義變量，并在多個地方引用這些變量，甚至可以實現動態改變樣式的效果。

因項目需要，做了一個主題切換，主題樣式都是通過定義var()變量改變：

1. 什么是 CSS 自定義屬性（變量）？

CSS 自定義屬性是允許我們定義變量的功能，這些變量可以在 CSS 中的任何位置使用。與 JavaScript 中的變量不同，CSS 變量的作用域是基于 DOM 結構的。換句話說，變量可以被局部或全局使用，這取決于它們的聲明位置。與傳統的 CSS 樣式表中直接寫死的值不同，自定義屬性可以在多個地方被引用和修改。CSS 自定義屬性的定義以 -- 開頭，且必須以 var() 函數來引用。

CSS 變量的聲明語法如下：

:root {
  --main-color: #3498db;
  --font-size: 16px;
}
body {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

在上面的例子中，--main-color 和 --font-size 是 CSS 自定義屬性（變量），它們分別代表主色和字體大小。通過 var() 函數，我們在 body 元素中引用了這兩個變量。

2. 如何定義和使用 CSS 變量？

2.1 定義 CSS 變量

CSS 變量的定義通常在 :root 選擇器中進行，這樣可以確保它們在全局范圍內有效。-- 是定義自定義屬性的前綴。

:root {
  --primary-color: #1abc9c;
  --secondary-color: #2ecc71;
  --font-family: 'Arial', sans-serif;
}

在這里，我們定義了三個變量：--primary-color、--secondary-color 和 --font-family，分別表示主色、副色和字體。

2.2 使用 var() 函數引用變量

一旦定義了 CSS 變量，就可以通過 var() 函數在任何需要的地方引用它們。

body {
  background-color: var(--primary-color);
  font-family: var(--font-family);
}
h1 {
  color: var(--secondary-color);
}

在這個例子中，background-color 和 font-family 使用了自定義變量，h1 元素使用了 --secondary-color 變量來設置顏色。

3. CSS 變量的作用域

CSS 變量是層疊的，這意味著它們的作用域是基于 DOM 結構的。變量的作用域可以是全局的，也可以是局部的。

3.1 全局作用域

當在 :root 中定義變量時，它們是全局的，可以在整個項目中使用。

:root {
  --global-color: #ff6347;
}
div {
  color: var(--global-color);
}
p {
  color: var(--global-color);
}

3.2 局部作用域

如果在特定的選擇器中定義了變量，它們只會在該選擇器內部生效。

.container {
  --local-color: #ff6347;
}
.container p {
  color: var(--local-color);
}
.container .title {
  color: var(--local-color);
}

在上面的例子中，--local-color 僅在 .container 元素內有效，其他地方無法訪問。

4. CSS 變量的默認值

聲明了 CSS 自定義屬性之后，在使用 var() 時，可以為變量提供一個默認值，如果該變量未定義或者無法找到時，CSS 會使用這個默認值。這可以防止頁面渲染時因缺少變量而導致的錯誤。var() 函數接受兩個參數：

• 必需的參數：引用 CSS 變量名。
• 可選的默認值：如果變量未定義或不可用，使用此默認值。

div {
  color: var(--undefined-color, #333);  /* 如果 --undefined-color 未定義，使用 #333 */
}

在這個例子中，如果 --undefined-color 沒有定義，color 屬性會使用默認的 #333 值。

5. 動態改變 CSS 變量

CSS 變量不僅可以在靜態樣式表中使用，還可以在 JavaScript 中動態地修改。這使得開發者可以通過 JavaScript 實現動態主題切換、響應式設計和交互式樣式調整等功能。

5.1 在 JavaScript 中修改 CSS 變量

可以通過 style.setProperty() 方法動態更改 CSS 變量。

document.documentElement.style.setProperty('--primary-color', '#9b59b6');

這行代碼會把全局變量 --primary-color 的值修改為 #9b59b6。

或者CSS修改(鼠標移入按鈕，改變變量)

button:hover {
  --primary-color: #3498db;  /* 修改變量 */
}

5.2 實現主題切換

例如，通過 JavaScript 和 CSS 變量，你可以實現一個簡單的主題切換功能。

<button onclick="toggleTheme()">切換主題</button>
<style>
  :root {
    --background-color: white;
    --text-color: black;
  }
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
</style>
<script>
  function toggleTheme() {
    const currentBackground = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();
    if (currentBackground === 'white') {
      document.documentElement.style.setProperty('--background-color', '#333');
      document.documentElement.style.setProperty('--text-color', '#fff');
    } else {
      document.documentElement.style.setProperty('--background-color', 'white');
      document.documentElement.style.setProperty('--text-color', 'black');
    }
  }
</script>

點擊按鈕后，toggleTheme() 函數會動態切換 --background-color 和 --text-color 變量，從而實現白天/黑夜主題的切換。

6. CSS 變量的繼承、計算和媒體查詢使用

CSS 變量支持繼承和計算，可以利用數學表達式來操作變量的值，增強樣式的靈活性。

6.1 繼承

當一個元素沒有定義某個 CSS 變量時，它會從父元素繼承該變量的值。

:root {
  --base-padding: 10px;
}
.container {
  padding: var(--base-padding);
}
.card {
  padding: var(--base-padding);  /* 繼承自 .container */
}

6.2 計算

可以在 CSS 變量中使用計算，比如通過 calc() 函數來計算尺寸。

:root {
  --base-size: 20px;
}
.element {
  width: calc(var(--base-size) * 2);
  height: calc(var(--base-size) + 10px);
}

在上面的例子中，--base-size 被用在 calc() 函數中進行計算，產生更靈活的布局。

6. 3 CSS 變量與媒體查詢結合使用

CSS 變量非常適合和媒體查詢一起使用，能夠幫助你輕松地創建響應式設計。你可以在不同的屏幕尺寸下，修改變量的值以實現不同的布局或主題。

:root {
  --font-size: 16px;
}
body {
  font-size: var(--font-size);
}
@media (max-width: 600px) {
  :root {
    --font-size: 14px; /* 在小屏幕下修改字體大小 */
  }
}

7. 兼容性

CSS 自定義屬性在現代瀏覽器中有很好的支持，包括 Chrome、Firefox、Safari、Edge 等，但在 IE11 及以下版本中并不支持。若要兼容舊版瀏覽器，可能需要使用其他方式來處理變量，或者考慮提供兼容的樣式（如利用 PostCSS 或 Sass 編譯器）。

瀏覽器支持：

• Chrome：支持
• Firefox：支持
• Safari：支持
• Edge：支持
• Internet Explorer：不支持

8. 總結

CSS 自定義屬性var()函數是 CSS 中強大的工具，它使得開發者可以更加靈活地管理樣式、提高代碼的可維護性，并且可以通過 JavaScript 動態修改樣式。通過合理使用 CSS 變量，我們能夠更高效地組織樣式代碼，輕松實現主題切換和響應式設計等功能。

關鍵點總結：

• 變量通過 -- 定義，在 var() 中引用。
• 可以使用全局和局部作用域。
• 可以為變量提供默認值。
• 可以通過 JavaScript 動態修改變量值。
• 支持繼承和計算，增加了樣式表的靈活性。
• 避免重復代碼，提高樣式的復用性。
• 使代碼更具可維護性，尤其是在大型項目中。

借助 CSS 變量，前端開發將變得更加靈活、簡潔，維護和擴展樣式表也變得更加容易。

?轉自https://juejin.cn/post/7468144197293867043