前言

不管是學習 CSS 或是 Sass，在認識完基本的使用方式之後，都會透過作品的實作練習，才會更加熟悉運作，前面幾天可以看到從小區塊的 CSS 練習，到一整頁的網頁練習。同樣在 Sass 也到 Udemy 找個實作網頁來練習。
這次的課程專案也相對複雜，在設定變數、mixin、function等等，用比較多進階的方式，如果沒有上過課程一開始真的也不會想到可以這樣設定，或是簡化。在此專案，除了學會 Sass 的基本語法以及檔案命名與配置之外，在基本的版面排版方式，主要使用 grid，藉此也還能在練習下 grid 的撰寫方式。

udemy課程： SASS - The Complete SASS Course (CSS Preprocessor)

課程重點整理：

1.scss 檔案的建立

會建立的不同分檔，個別負責不同的區塊，並透過@import放入主要的sass檔

• main.scss 引入其他分檔
• abstracts 資料夾
  • /_variables.scss：設定常用的變數，如：顏色、字體大小
  • /_mixin.scss：設定某些區段中，重複用到的樣式，並於該區段要使用的時候引用
• base 資料夾
  • /_base.scss：為設定大框架，如html、body、container，等主幹的大小、字型的設定
• components 資料夾:放置部分功能元件
  • /_button.scss：按鈕的設定
  • /_heading.scss：標題
• layout （設計網頁版面配置(Layout)）
  • /_header.scss
  • /_navigation.scss
  • /_footer.scss
• pages 資料夾 ：通常是用來放置其他分頁（網頁內會連結到其他相關分頁）
• venders 資料夾 ： 放置外部套件

2. class 命名

    <nav class="first-nav">
        <ul class="first-nav-list">
          <li class="first-nav-item">
            <a href="#" class="first-nav-link">
              <i class="fa fa-search"></i>
              search
            </a>
          </li>
          <li class="first-nav-item">
            <a href="#" class="first-nav-link">
              Contact Us
            </a>
          </li>
         </ul>
    </nav>

• 在Sass的撰寫下可以用連接符號撰寫名稱，並使用巢狀結構，更顯得簡潔、清楚

.first-nav{
   &-list{  
   
    height: 100%;
    }
  &-item{
    list-style: none;
  }
  &-link{
    color: color(primary);
   
  }
}

3. 使用@each，製作輪播效果

透過@each，可以將原本重複撰寫的語法，化繁為簡，帶入設定好的項目、時間，透過迴圈方式編譯完成。

• 設置延遲時間(4秒)，使每張圖片呈現(先為css的撰寫方式)
  • :nth-child()選擇第幾張圖片

/*設置延遲時間，讓每張slide呈現4秒替換*/
 .slideshow-slide:nth-child(1){
   animation-delay: 0s;
 }
 .slideshow-slide:nth-child(2){
   animation-delay: 4s;
 }
 .slideshow-slide:nth-child(3){
   animation-delay: 8s;
 }
 .slideshow-slide:nth-child(4){
   animation-delay: 12s;
 }
 .slideshow-slide:nth-child(5){
   animation-delay: 16s;
 }

• 將上方轉化為@each的寫法
  • 先創造一個自定義列表$animlist，在each迴圈時要傳進去的項目
  • 在each迴圈中.slideshow-slide:nth-child放入slide of number(取得列表中第一個值)，後面接著寫下要執行的動作animation-delay: nth($item,2);

///改寫為=>$animlist:第幾個 延遲秒數,
//#{nth($item,1)}: 帶入變數，1表示(2 4s)，第一個值=2
$animList:1 0s,2 4s,3 8s,4 12s, 5 16s;
@each $item in $animList {
   .slideshow-slide:nth-child(#{nth($item,1)}){
     animation-delay: nth($item,2);
   }
}

參考資料：
Sass - @each
Sass Tutorials #9 - Nth Function In Lists

此課程比較完整細節可以到我的 部落格 看看喔～