# CSS 變數
正式名稱是 custom property

## 基本語法

**宣告變數**
`--變數名稱: 值;`

**使用變數**
`var(--變數名稱)`

例如：

--color: #017fd2;
...

border: 2px solid var(--color);

---
## css 變數宣告帶入 scss 的變數

`--varName: #{$scssVariable};`
*在scss 變數名稱外加大括號和井字號*

例如:

**scss 變數**
`$primaryColor:#004f73;`

**引用到 css 變數**
`--myColor: #{$primaryColor};`

---

## 區域變數與全域變數
### 區域變數

.more {
  --color : #000;
  --bgColor : #ccc;
  --borderColor : #f00;
  
  a{
    color: var(--color);
    background: var(--bgColor);
  }
  ...
}

.search{
  --color : black;
  --bgColor : yellow;
  
  button{
    color: var(--color);
    background: var(--bgColor); 
  }
  ...
}

以上 .more 和 .search 雖然使用相同的變數名稱，但只在宣告的區域內有效，所以互不影響。

SCSS 的變數則是在編譯時就把變數值帶入到每個使用變數的地方。

### 全域變數

:root {
  --main-bg-color: brown;
}

在 :root 下宣告的變數被當成全域變數，可在文件任何地方引用

---

## 繼承
變數值可繼承。繼承原則與css相同。

例如：

HTML

<div class="aa">
  <div class="bb">
    <div class="c1"></div>
    <div class="c2"></div>
  </div>
</div>

CSS

.bb {
  --test: 10px;
}

.c1 {
  --test: 2em;
}

.aa, .bb, .c1, .c2{ 
  padding: var(--test);
}

---

【[範例-1](https://codepen.io/yachiung/pen/mdaWYLr)】
【[範例-2](https://codepen.io/yachiung/pen/zYyZQeV)】

---
## 後備值 （fallback values）

.aa{
  background-color: var(--bgColor, #fc0)
}

當變數 --bgColor 尚未被定義或設定的值不能用，使用逗號後面的值。

＊注意：後備值不是用來處理瀏覽器的相容性問題。如果瀏覽器不支援 var()，設定後備值也沒用。