---
# System prepended metadata

title: CSS自訂屬性和變數

---

# CSS自訂屬性和變數

  (- -變數名稱)

1. 變數可以提供給子層用，但不能提供給父層用


舉例:設一個hello變數等於green
```css=
.box {
  --hello: green;  
  width: 300px;
  height: 300px;
  font-size: 50px;
  background-color: var(--hello);
}

```

2. 將變數設置在根元素 (:root)
設置在根元素可以提供每個區域使用

```css=
:root {
  --papa: blue;
  --hello: green;
}

.box {
  width: 300px;
  height: 300px;
  font-size: 50px;
  background-color: var(--papa);
}

.parent {
  border: 10px solid var(--hello);
}
