什麼是 CSS 預處理器？

前端與後端、APP 最大差異在於瀏覽器，所以寫 CODE 要注意瀏覽器的支援程度。很新的語法在舊的瀏覽器上未必能用，不能用的東西，自己轉換就能用了，也就是很新的語法透過工具轉換後，在舊的瀏覽器上也可以使用了。

CSS 如果融合程式的概念，有 Function、變數，會是個很棒的體驗。

css 預處理器，就是在做上述事情。先寫某個語法，透過 css 預處理器轉換後變成 css，所以最後還是 css。

CSS 預處理器: SASS, SCSS

使用目的 => 開發更順利

原因 :

1. 更有語意(舉例 : 巢狀結構更好閱讀與理解)
2. 透過預處理器變成舊瀏覽器也能跑的形式

SCSS 簡介

因為需要編譯，所以需要程式輔助。npm install -g sass，透過 sass --version 檢視版本。

sass --watch input.scss output.css 是 CML 的指令，第一個參數是 input，第二個參數是 output。

先開一個 style.scss

$primary-color: #333;

div {
  color: red
}

輸入指令 : sass style.scss s.css => 發現多了兩個檔案， 1. scss.map 2. s.css

這個 map 就是 source map。通常 complie 出來只會顯示行數、東西，如果有 source map 瀏覽器就可以抓到原本的程式碼是甚麼，在 debug 的資訊就可以是原本的資訊。

如果每改一次就要手動編譯一次，有點浪費時間。所以只要在最前面加上 --watch，就會自動偵測 style.scss 有無變動，有變動的話就會自動幫我們 complie。

一、變數

可以不同的東西，共用同一個變數，這樣改動也會比較容易。 css variable 也可以做到相同事情，只是這個方式瀏覽器的支援度會更大。

SCSS SYNTAX
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

div {
  color: $primary-color;
}

二、巢狀

.box {
  h1 {
    font-size: 24px;
  }
  nav {
    color: $primary-color;
  }
}

三、Modules

可以從其他地方 import 進來。

四、Mixins

可以想成 funct，還可以傳參數進去。這樣一來設計上會更彈性。

@mixin full() {
  width: 100%;
  height: 100%;
}

.box {
  @include full();
  h1 {
    font-size: 24px;
  }
  nav {
    color: $primary-color;
  }
}

五、& 表示自己

div {
  color: $primary-color;
  &:hover {
    color: green;
  }
}

SCSS 實戰

可以將以前的 css 貼進 scss 的檔案中，他們是相容的。complie 完後他的長相會是 css 的樣子。

好處 : 更有結構、調整東西可以更統一調整。更複雜時，會開檔案，將變數獨立成一個檔案 import 進來。

$gray-01: rgba(0, 0, 0, 0.3);
$error-01: #e74149;
$font-size-title: 36px;
$font-size-input-title: 20px;
$font-size-normal: 16px;
$font-size-small: 14px;

body {
  background: $gray-01;
}

.wrapper {
  max-width: 645px;
  background: white;
  margin: 10% auto;
  box-shadow: 1.8px 2.4px 5px 0 $gray-01;
  border-top: solid 8px #fad312;
  padding: 64px 32px;
}

.apply-form {
  &__title {
    margin: 0;
    font-size: $font-size-title;
    font-weight: bold;
  }
  &__desc {
    margin-top: 32px;
    font-size: $font-size-small;
    line-height: 1.5em;
  }
  &__notice {
    color: $error-01;
    font-size: $font-size-normal;
    margin-top: 20px;
  }
  &__submit {
    background: #fad312;
    color: black;
    font-size: $font-size-normal;
    padding: 12px 32px;
    margin-top: 48px;
    border: none;
    border-radius: 4px;
  }
}

.input-block {
  margin-top: 55px;
  &__title {
    font-size: $font-size-input-title;
  }
  &__desc {
    font-size: $font-size-small;
    margin-top: 8px;
  }
  &__input {
    margin-top: 20px;
    & input[type=text] {
      border: solid 1px #d0d0d0;
      font-size: $font-size-normal;
      padding: 8px;
    }
    & label {
      display: block;
      margin-top: 12px;
    }
  }
}

.required:after {
  content: '*';
  color: $error-01;
}

footer {
  background: black;
  color: #999999;
  font-size: $font-size-small;
  text-align: center;
  padding: 24px 12px;
}

補充、

css 預處理器除了 scss, sas 之外還有 less, stylus