CSS 得撰寫並不困難，但是當 CSS 數量一多時，就變得難以維護與偵錯，所以我們會透過預處理語言 Sass 來幫助我們撰寫 CSS。

為什麼要使用 Sass

CSS 撰寫簡單，但寫多了要維護偵錯很困難

固定的顏色、字型、數字，都可以設定成變數

將重複的 CSS 提出來，實現 DRY

預處理，有 bug 直接顯示錯誤

Sass 與 SCSS 的不同

CSS 程式碼就是合法的 SCSS，附檔名 .scss

Sass 附檔名 .sass，更簡潔的程式碼

初學者可以直接從 SCSS 開始寫

巢狀寫法

SCSS

.content {
  border: 1px solid #ccc; 
  padding: 20px;
  h2 {
    font-size: 3em;
    margin: 20px 0;
  }
  p {
    font-size: 1.5em;
    margin: 15px 0;
  }
}

CSS

.content {
  border: 1px solid #ccc;
  padding: 20px;
}
.content h2 {
  font-size: 3em;
  margin: 20px 0;
}
.content p {
  font-size: 1.5em;
  margin: 15px 0;
}

巢狀寫法與 &（The Parent Selector）

SCSS

.content {
  border: 1px solid #ccc;
  padding: 20px;
  .callout {
    border-color: red;
  }
  &.callout {
    border-color: green;
  }
}

CSS

.content {
  border: 1px solid #ccc;
  padding: 20px;
}
.content .callout {
  border-color: red;
}
.content.callout {
  border-color: green;
}

還可以這樣寫

SCSS

.sidebar {
  float: right;
  width: 300px;
  .users & {
    width: 400px;
  }
}

CSS

.sidebar {
  float: right;
  width: 300px;
}
.users .sidebar {
  width: 400px;
}

變數

文字大小、顏色、字串都可以設定成變數

Sass 變數開頭用 $

// Booleans
$rounded: false;
$shadow: true;

// Numbers
$rounded: 4px;
$line-height: 1.5
;$font-size: 3rem;

// Colors
$base: purple;
$border: rgba(0, 255, 0, 0.5);
$shadow: #333;

// Strings
$header: 'Helvetica Neue';$callout: Arial;$message: "Loading...";
// Lists
$authors: nick, dan, aimee, drew;

變數使用情境

• 老闆說：我希望這個基本色在深一點

• 工程師：（把 CSS color, backgound 有用到基本色的，通通拿出來改）

• 老闆：好像還是原本比較好，改回來好了

• 工程師：(翻桌) ┻━┻

如果撰寫專案時有把基本色、強調色都設定成變數，那只要該一個，全都改了