什麼是CSS 預處理器？

CSS是用來撰寫網頁樣式的語言，但隨著網頁開發複雜度提高，尤其是大型專案，在開發時也面臨許多問題：

• 全域樣式會互相干擾，不易進行 debug，可維護性差
• 重複撰寫相同樣式，程式碼不易閱讀

為了解決這些問題，CSS 預處理器（CSS Preprocessor）就誕生了！作為 CSS 語法的擴充，用以改善程式碼的結構與可維護性。

簡單看一下css與scss的差異

scss：

.nav {
  background: #eee;
  li {
    display: inline-block;
  }
}

css：

.nav {
  background: #eee;
}
.nav li {
  display: inline-block;
}

scss基本語法

巢狀(Nesting)

透過巢狀式的結構也可以清楚的知道元素上下層的關聯性。

scss：
.box{
  width: 100%;
  margin: 0 auto;
  .title{
    padding: 10px;
    p{
      color: rgba(255, 0, 0, 1);;
    }
  }
}


編譯成css：
.box{
  width: 100%;
  margin: 0 auto;
}
.box .title{
  padding: 10px;
}
.box .title p{
  color: rgba(255, 0, 0, 1);;
}

變數(Variables)

可以用$來表示變數，變數可以用來儲存值，方便重複利用

scss：
$box-shadow: 10px 10px 5px rgba(0, 0, 0, 1);

.box{
  box-shadow: $box-shadow;
}

編譯成css：
.box{
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 1);
}

混入(Mixins)

將經常被重複使用的程式碼獨立撰寫，以 @mixin 語法包裝起來，需要時透過 @include 引用，即可根據不同參數來設定相似的樣式。

scss：
@mixin css3-border-radius() { 
  -ms-border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -o-border-radius: 5px; 
  border-radius: 5px; 
}
.box {
@include css3-border-radius();
}


編譯成css：
.box {
  -ms-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

匯入(Import)

在檔案中加入其他SCSS或CSS檔案，最後編譯時會一併編譯。

@import "head.scss";
@import "main.scss";
@import "footer.scss";

繼承(Extend)

當許多選擇器具有相同樣式時，可透過% 佔位符號宣告，將所有相同樣式內容合併，在以 @extend 來引入使用。

scss：
%box {
  border: 1px solid rgba(0, 0, 0, 1);
  padding: 10px;
  color: rgba(0, 0, 0, 1);
}

.success {
  @extend %box;
  border-color: rbga(0, 128, 0, 1);
}

.danger {
  @extend %box;
  border-color: rgba(255, 0, 0, 1);
}


編譯成css：
.success, .danger{
  border: 1px solid black;
  padding: 10px;
  color: black;
}

.success{
  border-color: rgba(0, 128, 0, 1);
}

.danger{
  border-color: rgba(255, 0, 0, 1);
}