切換語言為:簡體

解讀 CSS 原生巢狀功能與 CSS 變數

  • 爱糖宝
  • 2024-07-24
  • 2074
  • 0
  • 0

隨著 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,因此只有類名為 loremdiv 內的 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>


在這個例子中,當點選按鈕時,頁面背景顏色會從藍色變為紅色。

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.