前言

學完css，進階一點就來學習 CSS 預處理器吧！ 讓CSS 可以像一般程式語言一樣，有變數、函式、迴圈等功能。

剛開始接觸sass時，總會覺得很複雜，要先安裝SASS、如何引入、變數設定的方式、如何分類檔案與功用，每次撰寫完還得等他編譯轉檔為CSS，才能顯示到畫面上。
在利用工作之餘學習時，一樣採用片段式，在基礎語法的部分，就分了4-5天時間看完課程，邊筆記課程提供的語法介紹，即便上完課還是不太會使用。直到假日，再次將全部複習，搭配 官方文件 才能夠更釐清。

介紹 與 安裝

CSS預處理器，增加了一些編寫的特性，也可以說是運用程式化的方式寫CSS。

其中SASS最廣泛使用：Sass包含SASS與SCSS兩種
兩者之間不同之處有以下兩點：
1.文件擴展名不同，Sass 是以.sass後綴為擴展名，而SCSS 是以.scss後綴為擴展名
2.語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和 CSS 語法書寫方式非常類似。

安裝SASS

• 在專案底下，安裝
  npm install -g sass
  
  • 查尋安裝是否完成
    
• 安裝後，建立index.scss檔案
  
• 手動轉擋
  
  • 會出現css檔案
    

使用watch，使每次修改sass檔案時，會自動編譯到css中

• 在package.jason檔案中的"scripts"

 "scripts": {
    "watch": "node-sass -o css scss/main.scss -w"
  },

基本語法實作

變數

• 在變數前加上$，來宣告要使用的變數
• 運用抽取變數方式，使運用版面顏色時，可以有一致性，修改版面時也較快速
  • 變數：設定數量不要超過10個，自己在記憶上會混亂

// 創造顏色、字大小的變數
$white:#fff;
$black:#000;
.button{
text-align:center;
background-color:$black;
border:1px solid $black;
color:$white;
}

$font-lg:40px;
$font-md:30px;
$font-sm:20px;

.footer h3{
  font-size: $font-md;
  color: $color-secondary;
  text-align: center;

}

Nested 巢狀

是在SASS撰寫中，最常運用的方式，也更容易去區分同一個區塊將他們放在一起，可以更方便地整理。

針對nav下的ul、li

.nav{
  background-color: $color-primary;
  ul li{
    list-style: none;
  }
  a{
    text-decoration: none;
    font-size: $font-sm;
    color: $color-secondary;
  }
}

• 轉換為css

.nav {
  background-color: orange; }
  .nav ul li {
    list-style: none; }
  .nav a {
    text-decoration: none;
    font-size: 20px;
    color: gray; }

@import

• @import 讓我們可以拉出特定區塊或是根據功能性不同拆成不同區塊，來撰寫scss，並利用@import放入主要的scss檔案，最後彙整到同一個css之中。
• 再用一個css引入(@import)，各個功能
• 要引入的檔案命名：在要import的檔案要加_

下方：_test.scss為撰寫footer樣式的檔案

.footer h3{
  font-style:italic ;
  border: blue 3px solid;
}

main.scss 要引入檔案的主要檔案

@import "test";

• 轉譯為css(main.css)

.footer h3 {
  font-style: italic;
  border: blue 3px solid; }

@mixin 與 @include

• 當在多個地方想使用同一種style的方式。可以組成一組的樣式，並於scss中重複使用。
• 以 @mixin 開頭，並自定義一個名稱
• 需要它的時候就用 @include呼叫

1. 調整字體大小（以帶參數的方式）

// 發現h1,h3樣式一樣
@mixin headingStyles($fontSize){
  //以代參數方式來放入不同字體大小的變數設定
  font-size: $fontSize;
 color: $color-secondary;
  text-align: center;
} 

.banner h1{
 @include headingStyles($font-lg);
}
.footer h3{
  @include headingStyles($font-md);
}

• 在css的地方，可以看到字的大小不同

.banner h1 {
  font-size: 40px;
  color: gray;
  text-align: center; }

.footer h3 {
  font-size: 30px;
  color: gray;
  text-align: center; }

Functions

• 透過函式的建立，可以在需要使用時，不斷地呼叫使用
• @function fontSize($size){ @return $size*2; }建立函式

@function fontSize($size){
   @return $size*2;
}

 h1{
   .banner p{
  font-size: fontSize($font-sm);
  //字的大小會變成 20px*2 =>40px
  }

• 轉譯為css

.banner p {
  font-size: 40px; }

以上為Sass/SCSS 基礎介紹，明天就提供我實戰練習的課程分享啦～

參考資料：
Day27：小事之 Transition 與 Animation
CSS3 Animation
新手也可以輕鬆玩轉 SASS - @mixin and @include