嗨各位，今天是鐵人賽第12天，上期說到Scss/sass與css的差別今天要介紹的是SCSS/Sass基本語法，基本上和css相似，但是比css碼更好維護，那我們直接開始介紹吧。

變數

在CSS中也可以撰寫變數，但在SCSS中撰寫變數會更容易，變數以" $ "符號開頭，然後是變數名稱，然後是冒號 ":"，然後是變數的值，最後以分號";" 結束。我們直接來看範例:

$first-color: #333;
$secound-color: #eee;
$size: 10px;

變數的範圍

變數可分為全域變數和區域變數兩種。全域變數(不在任何 { } 內所宣告的變數)，反之，就是區域變數。
編譯前

// 這是全域變數
$first-color: #333;
$secound-color: #eee;
$size: 10px;

// 這是區域變數
.test {
    color: $first-color;
    background: $secound-color;
    width: $size;
    height: $size;
}

變數如何使用

只需要在屬性中引用變數即可。

$first-color: #333;
$secound-color: #eee;
$size: 10px;

body {
    background-color: $first-color;
    color: $secound-color;
    font-size: $size;
}

編譯後

body {
    background-color: #333;
    color: #eee;
    font-size: 10px;
}

變數的運算

在SCSS中，可以使用變數進行運算。

加減乘除

$width: 100px;
$padding: 20px;

$add-width: $width + $padding;
$subtraction-width: $width - $padding;
$multiplication-width: $width * $padding;
$column-width: $total-width / $columns;
$division-width: $width % $padding;

將這兩個變數做加減乘除還有取餘數，並儲存在$變數中。

今天的SCSS應用就介紹到這裡，肚子好餓阿，我要先去吃飯了，那我們明天鐵人賽再見吧~