隨著 CSS 的不斷髮展，原生巢狀功能和 CSS 變數的引入使得我們能夠更加簡潔和直觀地編寫樣式表。在這篇部落格中，我們將詳細介紹 CSS 原生巢狀功能的基本用法，包括基本巢狀、使用 & 符號、偽類和偽元素以及媒體查詢。同時，我們也會探討 CSS 變數的定義、使用、作用域、預設值以及如何動態改變它們。
CSS 原生巢狀功能
基本使用
CSS 原生巢狀允許我們在一個選擇器內巢狀另一個選擇器，使得樣式的層次結構更加清晰。以下是一個簡單的示例：
<style>
div {
span {
color: skyblue;
}
}
</style>
<div>
<span>lorem</span>
</div>
在這個例子中，span 選擇器被巢狀在 div 選擇器內，這表示所有位於 div 內的 span 元素將會被應用 color: skyblue 樣式。請注意，這種語法可能需要在一些瀏覽器中啟用實驗性功能。
使用 & 符號
在 CSS 原生巢狀中，& 符號表示父選擇器，可以用來引用當前巢狀的父選擇器。這在處理類名組合時非常有用：
<style>
div {
&.lorem {
span {
color: skyblue;
}
}
}
</style>
<div class="lorem">
<span>lorem</span>
</div>
<div>
<span>lorem</span>
</div>
在這個例子中，&.lorem 表示 div.lorem，因此只有類名為 lorem 的 div 內的 span 元素纔會被應用 color: skyblue 樣式。
偽類和偽元素
CSS 原生巢狀還支援偽類和偽元素的巢狀，使得樣式定義更加直觀：
<style>
.lorem {
&:hover {
color: skyblue;
}
+ span {
color: red;
}
}
div {
span {
&:last-of-type {
color: greenyellow;
&::after {
content: 'lorem-after';
margin-left: 5px;
color: gray;
}
}
}
}
</style>
<div>
<span class="lorem">lorem1</span>
<span>lorem2</span>
<span>lorem3</span>
</div>
在這個例子中，我們展示瞭如何在巢狀選擇器中使用偽類 :hover 和 :last-of-type 以及偽元素 ::after。
媒體查詢
CSS 原生巢狀還支援在選擇器內部巢狀媒體查詢，使得響應式設計更加方便：
<style>
.lorem {
color: red;
@media screen and (min-width: 500px) {
color: skyblue;
}
@media screen and (min-width: 1500px) {
color: gray;
}
}
</style>
<span class="lorem">lorem</span>
在這個例子中，我們為 .lorem 類定義了不同螢幕寬度下的不同顏色樣式。
CSS 變數
CSS 變數（又稱為自定義屬性）使得我們可以定義可重用的值，並在整個樣式表中引用這些值。它們的定義和使用非常簡單，並且可以在全域性或區域性範圍內使用。
定義和使用
可以使用 -- 字首來定義變數，並使用 var() 函式來引用它們：
:root {
--main-bg-color: #3498db;
--main-text-color: #ffffff;
--padding: 10px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
padding: var(--padding);
}
區域性變數
CSS 變數不僅可以在全域性範圍內使用，還可以在區域性範圍內定義和使用。例如，你可以在特定的選擇器中定義變數，這些變數只在該選擇器的上下文中有效：
.card {
--card-bg-color: #ffffff;
--card-text-color: #333333;
background-color: var(--card-bg-color);
color: var(--card-text-color);
}
變數的作用域
CSS 變數的作用域是基於它們被定義的位置。全域性變數在 :root 中定義，可以在整個文件中使用；區域性變數只在它們定義的選擇器及其子選擇器中有效。如果一個變數在多個地方定義，最近的定義會覆蓋之前的定義：
:root {
--color: red;
}
div {
--color: blue;
}
p {
color: var(--color); /* 如果 p 是 div 的子元素，則顏色為藍色，否則為紅色 */
}
預設值
var() 函式可以接受一個可選的第二個引數，作為變數未定義時的預設值：
p {
color: var(--undefined-color, black); /* 如果 --undefined-color 未定義，則使用黑色 */
}
動態改變變數
CSS 變數可以透過 JavaScript 動態改變，從而實現動態樣式的變化：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables</title>
<style>
:root {
--main-bg-color: #3498db;
}
body {
background-color: var(--main-bg-color);
}
</style>
</head>
<body>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.documentElement.style.setProperty('--main-bg-color', '#e74c3c');
}
</script>
</body>
</html>
在這個例子中，當點選按鈕時，頁面背景顏色會從藍色變為紅色。
