筆記使用 SASS / SCSS 讓網站開發更為便利的方式。首先會談論 SASS 與 SCSS 的差異，接著再說明如何將 SASS 轉換為 CSS 讓瀏覽器可以解讀，同時在開發過程如何藉由 sass-loader 將 sass 動態載入即時預覽效果，並整理個人在開發中所使用到的語法。
說明
| Abbreviation | Meaning |
|---|---|
| SASS | Syntactically Awesome Style Sheets. |
| SCSS | Sassy CSS. |
| CSS | Cascading Style Sheets. |
SASS VS SCSS
SASS 在撰寫上不需要 semicolon (分號) 與 curly bracket (大括弧)；而 SCSS 則是如同傳統 CSS 的寫法，但如同 SASS 支援 Variables、Mixin 等功能。目前對於 SASS / SCSS 仍不十分仰賴的情況下，仍習慣與 CSS 語法更為接近的 SCSS。
Variables
定義可以共用的數值，例如顏色、大小、長寬等資訊，可以做到修改單一變數值，一次調整好所有共用設計的便利功能。使用的方式是使用 $ 符號宣告變數。
Mixin
可以簡化處理網頁 RWD 時 CSS 編輯的繁瑣作業，只要先定義好各種 media，在元件的 Style 設定僅需要 include 即可。
$desktop: 'min-width: 1024px';
$tablet: 'max-width: 1024px';
$mobile: 'max-width: 600px';
@mixin desktop{
@media($desktop){
@content;
}
}
@mixin pad{
@media($tablet){
@content;
}
}
@mixin mobile{
@media($mobile){
@content;
}
}
.component-style{
margin-top: 20px;
@include mobile{
margin-top: 5px;
}
}