# 學習Sass#1 變數
###### tags: `Sass`

## 宣告變數來統一管理

CSS 可能會寫超多重複屬性在不同的區塊，然後區塊如果多又複雜，要修改還要一個一個修改會變得太慢而且容易出錯，所以可以設定變數統一個屬性再套用的標籤上都用這個變數哩

語法:

 $自定義名稱: 屬性值

EX: 想要新增一個新的背景色，並使用變數去套用

### 變數不可宣告套用標籤的後面

Sass 編譯是從上到下，所以標籤想要套用**變數是需要變數宣告在套用標籤的前面**，不然會出錯

## 變數搭配加減乘除

Sass 變數可以搭配加減乘除來設定屬性值，可用加減修改屬性值也可以拿另一個變數做運作產生屬性值

## 字串管理

如果是像字型的屬性值是字串的時候，**需要加個 `""` 或是 `''`**

## 調整顏色亮度

Sass 有內建的調整顏色亮度功能有 darken 、 lighten

語法:

background-color: darken(顏色 , 調暗多少%);
// ex: background-color: darken(#1636A3 , 20%); 背景色#1636A3 調暗 20%

background-color: lighten(顏色 , 調亮多少%);
// ex: background-color: lighten(#1636A3 , 30%); 背景色#1636A3 調亮 30%

p.s. 也可以帶入顏色變數喔