# CSS自訂屬性和變數

(- -變數名稱)

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

舉例:設一個hello變數等於green

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

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

:root {
  --papa: blue;
  --hello: green;
}

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

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