iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

SASS 基礎初學三十天 系列

從零開始學 SASS!
隨著現代專案越來越大型,協作的風氣盛行,我們最獨樹一格的前端三兄弟,還只有 CSS 駐足不前嗎?錯!在這幾年內,CSS 也成了獨當一面的大人了,發展了預處理器,讓設計 property 的方法更有彈性。
下次你在前端刻板的時候,不妨來試試看 SASS 吧!

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文 團隊波皮辣椒那你會修電腦嗎仙姑狗
DAY 21

DAY 21 製作 Nav Bar - FontAwesome

FontAwesome FontAwesome 讓我們可以快速方便的使用 Icon 的設計,不過他有免費版以及付費版,目前我們使用免費版即可 這邊先簡單介紹如何...

2021-10-06 ‧ 由 Tilda 分享
DAY 22

DAY 22 製作 Nav Bar - Hamburger

接下來要完成的是打開 menu 內容的 hamberger,就是『 三 』這個符號,之前的 fontawesome 中我們已經將 icon 加入了,現在要來調整...

2021-10-07 ‧ 由 Tilda 分享
DAY 23

DAY 23 Typography, Hover 以及 Extend

隨著內容越來越多,結構更加複雜,是時候來整理一下關於字型的配置,這次我們來新增一個 _typography.sass 的 partial,並且利用 extend...

2021-10-08 ‧ 由 Tilda 分享
DAY 24

DAY 24 Full Screen Modal

接著我們要做的是打開 menu hamberger 後的 full screen modal,裡面包含了所有 VOGUE links Modal 首先我們再新增...

2021-10-09 ‧ 由 Tilda 分享
DAY 25

DAY 25 Full Screen Modal - Follow Us

這個部分主要是 social media 的區塊,會用到 fontawesome 上的 icon 們,需要 facebook、IG、Youtube 跟分享符號等...

2021-10-10 ‧ 由 Tilda 分享
DAY 26

DAY 26 首頁文章

終於跳脫 header 的部分來到了下面文章列表啦,總覺得光是上半部就做了好久,不知道完賽前能不能把整個畫面刻完XDD 先來新增 component 吧! //...

2021-10-11 ‧ 由 Tilda 分享
DAY 27

DAY 27 文章列表

嗨,今天來完成底下文章的部分,金嗨,內容越寫越多,因為快要完賽了節奏沒抓好XD,前面都是分開解析的,結果後面變成一個 section 一大包,真是抱歉QQ 再放...

2021-10-12 ‧ 由 Tilda 分享
DAY 28

DAY 28 文章列表 - 2

對,他有兩種版型:D 左側的大圖! 不知道為何大標都想加驚嘆號XD 因為文章資料的內容太常用到了,所以把他整理成了 json 方便之後快速使用~ import...

2021-10-13 ‧ 由 Tilda 分享
DAY 29

DAY 29 真的是 Footer 了

終於來到 Footer 了QQ,總覺得寫了好久 新增檔案 跟前面的流程一樣,新增 footer 的 js, sass 檔案,並且匯入 // Footer.js...

2021-10-14 ‧ 由 Tilda 分享
DAY 30

DAY 30 好用的套件

推薦擴充套件 Color Highlight 這邊跟大家推薦 Color Highlight 這個擴充套件,也是我在實作的時候才發現他的實用之處,當你設置關於...

2021-10-15 ‧ 由 Tilda 分享