# 9/29 CSS - plug in 介紹
###### tags: `CSS3 基礎實作` `2021/09/29` `進度筆記` `前端心得`
---

# 今日講課 -- 上午的部分 - Microsoft old hompage - carousel discussion

# 做完的試著研究 AOS - plug in 用法
[https://michalsnik.github.io/aos/](https://michalsnik.github.io/aos/)

---

# Carousel 檢討
找到父層的 div 位置

↓ 小螢幕, 1083px 的時候會變小


如果沒變小, 記得去 CSS 把 Swiper

---

手機版的時候會變大


調整 high


----

# 滑鼠移到圖片上會顯示出左右按鈕


## 先幫他加上圓形外框

- 找到 swiper-button

- 開以拉看一下

> 給他個背景顏色和大小

- 把按鈕的文字 ">" "<" 弄小
> 觀察 CSS 結構, 發現是 after 的樣式


----

# CSS 陰影 - box shadow

- 幫按鈕上陰影

↓ 跟以拉的陰影有點像, 開以拉來看

通常設計師有用以拉的話會在以拉內的圖片放圖案的陰影, 可以照著寫一下

↓ 然後他是 hover 的時候陰影更深
X 偏移 量大, 然後多給一個擴散半徑
![Uploading file..._737v13opc]()

↓ 如果調整擴散半徑會超糊

↓ 用 dev tool 去實際操作一下, 就非常像了 

↓ 然後 hover 的時候才有陰影
> hover 的時候才有陰影

↓ 當 Swiper hover 的時候, 裡面的按鈕會跑出來

↓ 把按鈕貼邊, 往上調整, 按鈕的定位看起來是各有一個 auto

↓ 左邊離左邊是 0, 右邊離右邊是 0 就上去了

# 分頁按鈕是 div
- 觀察一下
↓ 如果要微調, 找 Swiper pagination, 權重很小

---

↓ 調整分頁按鈕大小

↓ 有 active 的時候分頁按鈕本身是黑色的, 而background-color 是淡灰色

↓ border 調整一下

---

# 下午的部分 - 研究 AOS - plug in 用法
- 套件如果沒有用 js, 用 CSS 寫的話, 可以用權重去覆蓋(調整 CSS 位置)

- 卷軸動畫套件(Animate on scroll library)

- 引入套件試試看, 別忘了寫註解~


---

# Initialize AOS
- 啟用這個套件~

---

# Set data-aos


---

# 設定背景, 畫個方塊一下~
沒有反應, 因為這個 aos 是滾動到某個程度的時候才會有作用, 來加個 banner

↑ 記得給 box 上個 background-color~

# 可以給複合的屬性
delay 50 → 0.05s

> 會延遲才跳出~

# 全域改變

全部都延遲 0.05s


----

# animejs.com

- 有點像引擎, 要改 js

[anime.js • JavaScript animation engine (animejs.com)](https://animejs.com/)


----

# animate.css
- 純CSS plug in

[Animate.css | A cross-browser library of CSS animations.](https://animate.style/)
> ↑ 首頁有示範一些效果

==# 參考資料:==
[【Day 26】CSS Animation - CSS 動畫資源蒐集與使用教學 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10251903)

[微動畫簡單做！使用 animate.css 五秒提升作品質感](https://blog.infographics.tw/2016/11/animate-css/)

[jQuery 筆記 - Animate.css 套件基本認識 | TimCodingBlog (hsuchihting.github.io)](https://hsuchihting.github.io/jQuery/20200713/60669434/)

[都給我動起來! Animate.css 分享 - 客座投稿 | W3HexSchool](https://w3c.hexschool.com/blog/b800f62e)

---

# require

- 引入 CDN

- 用 class name 的方式加上 CSS style
> 添加 animate_animated 到 class as initialize

---

# 第二種 require 方式

- 可以用 @keyframes 的方式去啟用

- 先不定義 @keyframes 去看看

可以直接看到動畫效果, 因為引入的 CDN 已經幫你自動加入 @keyframes 的作用了

*使用的時候記得把前綴刪除*

animate__wobble
↑ 刪除這個前綴 animate__


---

# 全域變數
==`:root` 可以讓所有的動畫效果都吃到效果==

---

# 也可以加入後綴


---
---
---
---

# hover.css

- 有些 plug in 沒有提供 CDN~
- 要用下載的方式
[Hover.css - A collection of CSS3 powered hover effects (ianlunn.github.io)](https://ianlunn.github.io/Hover/)

---

# 下載後用個新創資料夾 dist 裝你的 plug in

↓ 可以看到裡面有很多檔案
> 蠻肥大的

---

- initialize
> 實際上要用的只有這隻檔案

- 可以複製出來另外用

- 像這樣 ↓
> 然後刪掉你下載後不需要的其他 CSS 檔案

- 展示:

- icon 是用 fontAwsome 的~

---
---
---

# Website style guide
- 定義了按鈕大小, 顏色, 設計
- 一個優秀的網站有主色, 輔色, 不會有太多的顏色和過於花俏
- 大概不會超過十種顏色

# ==參考資料:==

[Project style guide template by Ivan Bjelajac for Five on Dribbble](https://dribbble.com/shots/2688568-Project-style-guide-template)

---

# Sass / SCSS 的宣告方法

==參考資料:==
[30天掌握Sass語法 :: 2013 iT 邦幫忙鐵人賽 (ithome.com.tw)](https://ithelp.ithome.com.tw/users/20040221/ironman/562)

[30天掌握Sass語法 - (3)如何透過「變數」提升撰寫CSS效率 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10127206)

---
---
---

- 先在另外一隻檔案 `_variables.sccs` 宣告變數:
- 要有意義的命名變數~

---

- 使用方法:

> 不過沒顯示出來~!?

---

# 沒顯示是因為要引入外部檔案: @import

# ==參考資料:==
[30天掌握Sass語法 - (5)利用Sass「@import」進行CSS檔案模組切割 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10127832)

- 編譯方式:

- - 做模組化的引用
- - 加入@import

---


---




---

# 文字也可以模組化 - @import
在 _variables.scss 中定義好
定義好後~

去正在寫的 scss 檔案中, 用 @import 可以引入, 把變數拿進來用

---

# scss 可以定義 @mixin
# ==參考資料:==
[30天掌握Sass語法 - (6)利用Sass「@mixin」，讓你省去重複撰寫相同CSS樣式的時間 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10128138)

[Sass:@mixin指令介绍 | Sass中文网](https://www.sass.hk/skill/sass142.html)

- @mixin (mixin 混入, 混合) 的用法
- 可以包含任意數值, 並且傳遞參數!
- 相較 @extend 更有彈性
- 如果要使用相同的 CSS 片段, 且不被相關元素所拘束限制, 可以用 mixin, 他可以用在任何地方
- @mixin size() 定義了一組變數, 專門用來控制寬高圓角


- @include size() 可以連到 @mixin, 之後就可以拿去用:


- 邊框變成圓角

## 宣告定義位置

- 先定義:

- 修 html
> 多加一個 span

- 然後讓 span 水平垂直置中

- 結果

---

# 比較少用的 @extend
# ==參考資料:==
[30天掌握Sass語法 - (7)利用Sass「@extend」，讓你無痛合併CSS樣式 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10128359)

[SASS : extend繼承 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)](https://ithelp.ithome.com.tw/articles/10204606?sc=iThelpR)

[Sass教程 Sass中文文档 | Sass中文网](https://www.sass.hk/docs/#t7-3)

[鐵人賽 26 - 實戰心法 - 應避免的 Sass @extend (https_wcc723.github.io)](read://https_wcc723.github.io/?url=https%3A%2F%2Fwcc723.github.io%2Fcss%2F2016%2F12%2F26%2Fsass-extend%2F)

[Sass：@mixin和@extend该如何选择 | Sass中文网](https://www.sass.hk/skill/sass141.html)

- extend 延展, 常用來借用或省略重複的屬性與數值(key & value)
- 可用來製造 dry css(相同的樣式在不同的選擇器內有重複內容的發生)
- 但問題是, 無法傳參數到 extend 內
- 而且會把增加選擇器間的聯繫, 把他們堆在一起! 造成維護比較困難
- super-h1 寫了跟 h1 重複的屬性
- 但 super-h1 可能還有其他顏色, 像是 border 和 background-color

- 可以用 @extend 去借 h1 重複(或是想要)的屬性, font-size, font-weight, color 等

- h1 加了 % 後, 這個 CSS 選擇器的屬性就不會被顯示, 然後被借用到其他人那
> 你想要的重複或是拿過來的屬性, 使用 @extend % 的用法就可以拿到~


----

# Sass / SCSS 進階用法

## 色相環 套法

# 更改一下 html
- 多一個按鈕


# SCSS 多一個新增按鈕的顏色

- lighten 色相環玩法~
- 有點像用 CSS hsl


---



- 讓他亮一點


- 但不能太亮, % 值 過高顏色會消失

---

# 可以快速幫忙做出用在 hover 的顏色
- hover 變亮

- active 的時候變暗

> 再丟個 cursor pointer 就會移到按鈕上有手掌符號~


---
---

- 自己玩一次~


- 做 hover, 移動上去變色


---

# 進階困難玩法 - for 迴圈

for(var n = 1; n < 10; i++ ) {
    print * 
}

i = 1 的情況, 且 i < 10 印出一個 *
i++ 代表 i = i+1 

i=1 拿到一個 *
i=2 拿到一個 *
...
......
i=10 超過 拿不到 * 

所以拿到 9 個 * 

# JS 和 SCSS 都有迴圈可以用, 但 CSS 沒有迴圈!

- to 例如 `1 < 10`
- through 例如 `1 <=10`

- 實作 一下


四欄位排版
寬度 = 100 / col 數量的值
那六欄位就要 / 6
八就 / 8 .... @#%@#!@

---

==以此類推, 慢慢寫固定 % 很麻煩==

- 所以可以用迴圈

- 這樣代表 讓 i 從 1 跑到 10, 所以是↓
> 會一路印到 10

----

- 那會想, 能不能用算的, 我們讓寬被計算, 100% / i 試試看?

- 印出來看看 ↓

> 他一樣印了 i 這個數值 十次!

- 這是因為 SASS/ SCSS 他不知道 i 是甚麼

- sass/scss 內不用用到 cal, 直接寫出來就行了

- 那他就會幫你算出, 你跑了 10 次寬度去除以 1, 2, 3...到 10 的數值

---
---

# 也就是說, 我們不能只讓 i 去跑, 要定義 i
# ==參考資料:==
[Sass教程 Sass中文文档 | Sass中文网](https://www.sass.hk/docs/)

那如果把 i 加上 $, 我們用上變數$
> 會發現有錯, 如果要把變數 $ 用在 width/$i 以外的地方

- 要用 ``#{}`` 這樣可以轉成 strings


- 這樣一來他會幫你定義出欄位的數字(數值被轉成字串了)!


---
---
---

# 應用這個寫法到產生欄位

- 所以可以應用到幫忙來長 SCSS 樣式

這樣的話,



- 自動幫你生成欄位 ↓

---

四欄位 六欄位 八欄位排版都有了



- 自己試一次:

---

再多一個三欄位的排版也有了




- 自己試一次:

---