---
tags: 互動程式設計,2-11,sass，學生版,動畫互動網頁特效入門（JS/CANVAS）
---
# 2-11 -使用sass迴圈與內容網頁_學生版
## 製作一個禮盒元件
```pug=
.present
.cap
.vribbon
.hribbon
```
```sass
*
border: solid 2px black
.present
width: 100px
height: 100px
background-color: #ff5151
margin: 5px
position: relative
transform: rotate(5deg)
.vribbon
width: 15%
height: 100%
background-color: #fff
position: absolute
top: 0
left: 50%
transform: translateX(-50%) /**/
.hribbon
width: 100%
height: 15%
background-color: #fff
position: absolute
top: 50%
left: 0
transform: translateY(-50%) /**/
.cap
height: 15%
width: calc(100% + 10px)
transform: translateX(-5px)
background-color: #f00
```
### 加上陰影
https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_box-shadow&preval=20px%2020px%2010px%20grey
---
## 設定變數
想要大量製作
需要設定變數
```sass
```
---
## 設定函數
使用mixin
```sass=
@mixin present($size:100px,$bodyColor: #ff5151,$ribbonColor: #fff,$rotateDeg: 0deg)
// $size: 100px
// $rotateDeg: 5deg
// $bodyColor: #ff5151
// $ribbonColor: #fff
width: $size
height: $size
position: relative
background-color: $bodyColor
box-shadow: 0px 0px 20px rgba(black,0.5)
transform: rotate($rotateDeg)
margin: 10px
```
---
## 產生相同物件的禮盒
sass需要注意內縮
```pug=
.present
.cap
.vribbon
.hribbon
.present2
.cap
.vribbon
.hribbon
```
---
```sass
```
---
## HTML大量產生多個元素
```pug=
.present*50>.cap+.vribbon+.hribbon
```
---
## 加上編號
pug 跟 Emmet 都有辦法幫我們解決這件事情
我們先用 Emmet 來幫我們解決
在前面打一個 $
```pug=
.present$*50>.cap+.vribbon+.hribbon
```
---
## 使用迴圈
css大量產出
使用迴圈for
並設定變數#{}包住變數
```sass=
@for $i from 1 through 50
.present#{$i}
+present(120px,#2853ff,#ffd428,40deg)
```
---
## 整頁的設定
把盒子放在同一排上，滿了就自動換行
```sass
```
---
## 產生形狀不一禮盒
產生了50個相同的禮物，但形狀都一樣
設定變數，讓每個禮物盒都有不同大小
```sass
```
---
## 顏色定義(顏色陣列)
```sass=
$colorRed: #f24
$colorWhite: #fff
$colorBlue: #3364f7
$colorYellow: #ffd221
$colorPurple: #c747ff
$colors: ($colorRed,$colorWhite,$colorBlue,$colorYellow,$colorPurple)
```
---
## 迴圈變數設定
```sass=
```
---
## 最後程式碼
最後把沒有變數的屬性可以直接拿出來
最後sass的內容有縮短內容(在@mixin內的內容有縮短)
記得要按Tab按鍵，
```pug=
```
```sass
```
2-11 -使用sas ... 內容網頁_學生版.md
選擇開啟工具
目前顯示的是「2-11 -使用sass迴圈與內容網頁_學生版.md」。
Sign in with Wallet
Connect another wallet