前面從HTML的基本結構至CSS的基礎教學，也已經過了二十多天了，今天就來看看依照目前所學，可以做出什麼樣子的網頁吧！

參考範例

首先請參考範例連結：https://codepen.io/hexagoncircle/pen/XWbWKwL

SCSS的結構

從第一天跟到現在的人一定也有發現，這個案例在第七天的文章中也有出現過了，只是當時的主軸在說明HTML Pug的寫法，說明HTML的語法格式也能透過精簡洗鍊的方式呈現。

CSS中的「$」符號，SCSS簡介

在語法中看到$和&的符號，會直覺想到是透過SCSS的程式語法撰寫而成。SCSS和CSS的關係，有點像是HTML Pug和HTML的關係，SCSS是一種簡化的CSS寫法，整體而言和CSS差不多，在閱讀理解上會較為輕鬆。

首先來看一下以下語法：

$bp-md: 600px;
$bp-lg: 800px;

這邊在SCSS裡面，簡單翻譯就是設定$bp-md就是600px，只要之後在語法中出現$bp-md直接視為600px。

對照CSS中:root的寫法

這邊SCSS的寫法就跟:root{}很類似，只是在root的部分必須使用「--變數名稱」進行全域變數設定。筆者在這邊嘗試過使用root的方式無法設定響應式的寬度使用。來看一下root的語法：

:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
  --font-sans: "Rubik", sans-serif;
  --font-serif: "Cardo", serif;
}

Root簡而言之就是在設定變數，之後若在語法撰寫中直接套用var(--d)就是直接套用700毫秒。這邊有使用到cubic-bezier貝茲曲線的語法，該語法通常使用在transition轉場和animation動畫的部分，是可以獨立拉出一個篇章的主題。明天在說明動畫部份時會帶到這個部分。

由於篇幅有限，在本次的範例中，可以在codepen中更改語法的呈現方式進行閱讀。點選CSS語法部份小齒輪右側的下箭頭，選取「View Uncompiled SCSS」，就可以將SCSS的語法轉換成CSS的模式進行閱讀，同樣可以發現CSS能做到的事情相當多。若有看不懂的部分可以善用Google進行了解。

是不是很簡單！明天會說明CSS動畫的部分，我們明天見囉！