--- 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」。