Sass 和SCSS 有什麼區別？

Sass 和SCSS 其實是同一種東西，我們平時都稱之為Sass，兩者之間不同之處有以下兩點：

1. 文件擴展名不同，Sass 是以“.sass”後綴為擴展名，而SCSS 是以“.scss”後綴為擴展名
2. 語法書寫方式不同，Sass是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而SCSS的語法書寫和我們的CSS語法書寫方式非常類似。

先來看一個示例：

Sass 語法

$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
  font: 100% $font-stack
  color: $primary-color

SCSS 語法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

編譯出來的CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

提示：小伙伴們可以看出來，我們的右側代碼使用的是SCSS語法方式（我們的代碼編輯器不支持Sass語法方式噢！）。

任務

編寫第一個".scss"文件，在編輯器的第一行和第二行定義一個變量，並在body中調用對應變量來設置body大小尺寸？

body {
width: 200px;
height: 300px;
}