---
# System prepended metadata

title: 2-9 -pug/sass說明_學生版
tags: [2-9, pug/sass說明，學生版, 動畫互動網頁特效入門（JS/CANVAS）, 互動程式設計]

---

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

# 2-9 -pug/sass說明_學生版
```pug=
//- <h2>pug前處理語言</h2>
h2 pug前處理語言

//- <h2 class="title red">pug前處理語言<span class="smallText">小文字</span></h2>
h2.title.red pug前處理語言
  span.smallText 小文字
  
//- <ul class="personlist">
//-   <li class="person">
//-     <h3>名字1</h3>
//-     <p>內文介紹</p>
//-   </li>
//-   <li class="person">
//-     <h3>名字2</h3>
//-     <p>內文介紹</p>
//-   </li>
//-   <li class="person">
//-     <h3>名字3</h3>
//-     <p>內文介紹</p>
//-   </li>
//- </ul>
ul.personlist
  .person
    h3 名字1
    p 內文介紹
  .person
    h3 名字2
    p 內文介紹
  .person
    h3 名字3
    p 內文介紹

//- <a href="網址"></a>

a(href="網址") 連結文字
img(src="圖片網址",
    width="400px")
    
 ```

---
浮光書店的例子(HTML)

```pug=
.box
  .top
    h2.name 浮光書店
      span.smallText IlluminationBooks
    .tag
    .cirButton
  .bottom
    ul
      li
        h3 地址：
        | 號 2 樓, No. 16赤峰街47巷大同區台北市103
      li
        h3 電話：
        | 02 2550 7288
      li
        h3 開放時間：
        | 今日正常營業 · 14:00–21:30
    .buttons
      a.btn.btnWebsite(href="https://www.facebook.com/IlluminationBooks/"  target="_blank") 前往網站
      a.btn.btnNews(href="https://www.facebook.com/IlluminationBooks/posts/1549318938413177" target="_blank") 前往網站
```



---
浮光書店的例子(CSS)
```sass=
.title
  font-size: 50px
  color: black
  
  .smallText
    font-size: 20px
    &:hover
      color: red
    
  &.smallText
    color: red
    
  &:hover
    color: blue

.top
  .name
    position: absolute
    margin: 0
    left: 0
    bottom: 0
    padding: 5px 15px
    letter-spacing: 2px
    .smallText
      
      font-size: 14px
  .tag
```



---

## 產生兩個大小顏色不同按鈕

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

```pug=
.btnGrey.btnLg 測試按鈕
.btnYellow.btnMd 測試按鈕
```

```sass=
*
  border: solid 1px
@mixin button
  display: inline-block
  padding: 10px 20px /*10px上下，20px左右*/

.btnGrey
  background-color: #eee
  +button
.btnYellow
  background-color: #ffdd38
  +button
.btnLg
  padding: 30px 60px
.btnMd
  padding: 20px 40px
```
---
## 使用sass中的@mixin來處理
```sass=




```


---
## pug就可以把前面的btn刪掉

```pug=



```


---

```sass



```


---
如此就可以增加另外兩個按鈕
![](https://i.imgur.com/nhBbUZY.png)

```pug=
.btnGrey.btnLg 測試按鈕
.btnYellow.btnMd 測試按鈕
.btnRed.btnMd 測試按鈕
.btnBlack.btnLg 測試按鈕
```
---
```sass=
*
  border: solid 1px
@mixin button($color:#eee,$fontColor:#222)
  display: inline-block
  padding: 10px 20px /*10px上下，20px左右*/
  background-color: $color
  color: $fontColor
.btnGrey  
  +button
.btnYellow  
  +button(#ffdd38)
.btnRed
  +button(#ff5151)
.btnBlack
  +button(black,white)
.btnLg
  padding: 30px 60px
.btnMd
  padding: 20px 40px
```


---
滑鼠滑入，按鈕顏色變深(只針對一個按鈕)

```sass=



```


---
把大小也放入@mixin內


---
```pug=



```


---

```sass



```

---

加入顏色的變數

```pug=
.btnGrey.sm 測試按鈕
.btnYellow.md 測試按鈕
.btnBlack.md 測試按鈕
.btnRed.lg 測試按鈕
```



---
```sass=



```



---

```sass=




```


---

2-9 -pug/sass說明_學生版.md
登入
目前顯示的是「2-9 -pug/sass說明_學生版.md」。