SCSS 變數

像 SCSS、LESS 這種 CSS 預處理器，都具備變數這個特點。
變數存取一些有意義的數值，幫助我們更方便的建構或維護代碼。



SASS 的變數命名以 ＄ 開頭，變數名稱可用英文、數字、減號(-)與底線(_)組成，不可有空白。
不同於一般程式，變數使用冒號(:)指定，使用分號(;)結束，以下是變數的一些示例：

//存顏色，也可以用 rgba(0, 0, 0, 255); 之類的形式
$color: #0088cc;

//存數字
$int: 10;

//帶單位的數值，也可以用 em，rem、vh、vw、px 等等
$size: 50%;

//存布林值， true 或 false
$bool: true;

//存 css 樣式，例如 inhert、absolute 等等
$style: block;

//存字串，需用單引號或雙引號包圍
$selector: '#logo';

//存 SASS list
$selector: 1px, 2px, 3px;

//存 SASS map
$selector: ( white: #fff, black: #000, gray: #ddd );

變數可以儲存任何東西，我們來看看實際應用的場景。

$color: #0088cc;

.box {
    border: 2px solid $color;

    .inner {
        background-color: $color
    }
}

以上會匯出：

.box { border: 2px solid #0088cc; }
.box .inner { background-color: #0088cc; }

如此我們就可以修改一個變數，以改變多個內容。