---
tags: Bootstrap5
---

# 知識點：CSS Variables(css 變數)

* 在使用全域變數時的方式

  /* root起手式 */
 :root {
            /*  前面名稱 可自訂        
            --primary: #69f0AE
        }

> 後面承接變數的定義一個var()，並將自訂義名稱放入

.bg-primary {
            background-color: var(--primary);
        }

### 進階覆蓋套用方式

* 定義一個local 在內容套用一個 --primary並修改值

/* 進階套用 */
        .local {
          /*  主要覆蓋是要覆蓋變數內容*/
            --primary: orange;
        }

> 在html架構中覆蓋上一層即可

<div class="local">
        <div class="box bg-primary"></div>
    </div>

* 樣式就會跟上一個樣式不一樣，主要覆蓋是要覆蓋變數內容