---
# System prepended metadata

title: 2-11 -使用sass迴圈與內容網頁_學生版
tags: [2-11, sass，學生版, 動畫互動網頁特效入門（JS/CANVAS）, 互動程式設計]

---

---
tags: 互動程式設計,2-11,sass，學生版,動畫互動網頁特效入門（JS/CANVAS）
---

# 2-11 -使用sass迴圈與內容網頁_學生版

## 製作一個禮盒元件

![](https://i.imgur.com/FyKJDAK.png)


```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

![](https://i.imgur.com/n0fujAe.png)
![](https://i.imgur.com/3SfqHX6.png)


![](https://i.imgur.com/n1DvdfU.png)

![](https://i.imgur.com/I8xo3ay.png)

---
## 設定變數
想要大量製作
需要設定變數

```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
```
---

## 產生相同物件的禮盒
![](https://i.imgur.com/zX3vnhF.png)

sass需要注意內縮
```pug=
.present
  .cap
  .vribbon
  .hribbon
.present2
  .cap
  .vribbon
  .hribbon
```


---

```sass






```

---
## HTML大量產生多個元素
![](https://i.imgur.com/F0geZi9.png)

```pug=
.present*50>.cap+.vribbon+.hribbon
```


---
## 加上編號

pug 跟 Emmet 都有辦法幫我們解決這件事情
我們先用 Emmet 來幫我們解決
在前面打一個 $
![](https://i.imgur.com/P1QDLGb.png)

```pug=
.present$*50>.cap+.vribbon+.hribbon
```


---
## 使用迴圈
![](https://i.imgur.com/vaTnpA9.png)

css大量產出
使用迴圈for
並設定變數#{}包住變數
```sass=
@for $i from 1 through 50
  .present#{$i}
    +present(120px,#2853ff,#ffd428,40deg)
    
```





---
## 整頁的設定
把盒子放在同一排上，滿了就自動換行

![](https://i.imgur.com/3qKqS2t.png)


```sass



```
---

## 產生形狀不一禮盒

產生了50個相同的禮物，但形狀都一樣
設定變數，讓每個禮物盒都有不同大小
![](https://i.imgur.com/NoZ6EeO.png)


```sass



```
---
## 顏色定義(顏色陣列)

```sass=
$colorRed: #f24
$colorWhite: #fff
$colorBlue: #3364f7
$colorYellow: #ffd221
$colorPurple: #c747ff
$colors: ($colorRed,$colorWhite,$colorBlue,$colorYellow,$colorPurple)
```

---
## 迴圈變數設定
![](https://i.imgur.com/MWcYMOo.png)

```sass=




```


---
## 最後程式碼
最後把沒有變數的屬性可以直接拿出來



最後sass的內容有縮短內容(在@mixin內的內容有縮短)


記得要按Tab按鍵，
```pug=


```

```sass




```

2-11 -使用sas ... 內容網頁_學生版.md
選擇開啟工具

目前顯示的是「2-11 -使用sass迴圈與內容網頁_學生版.md」。