[Day 12] Sass/SCSS 实作练习

前言

不管是学习 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

此课程比较完整细节可以到我的 部落格 看看喔～