iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

SASS 基礎初學三十天 系列

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

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

DAY 11 Operators

Operators 有時候畫面的比例,會影響 CSS 顯示的效果,而在 SASS 中,我們可以用數學的運算公式去調整 style 中的內容,讓設計樣式更加聰明的...

2021-09-26 ‧ 由 Tilda 分享
DAY 12

DAY 12 SASS 間的相似之處

介紹完了前幾天的 sass 各種用法,大家有沒有覺得有些方法好像很類似? 像是 mixin 跟 extend,兩個都是預先寫好,再引入使用的做法。 差別只在於...

2021-09-27 ‧ 由 Tilda 分享
DAY 13

DAY 13 接下來的實作

接下來的天數,預計要來實作上面已經教學的 sass 方法,畢竟學習是一回事,真正拿來實作則是另一回事,好的實作可以讓你更熟悉 sass 的操作方法以及 mixi...

2021-09-28 ‧ 由 Tilda 分享
DAY 14

DAY 14 UI Framework

在開始實作畫面之前,我們先來了解一下常見的 UI Framework,並瞭解他們的設計方式,以便後續做設計上的 sass 結構參考吧! 常見的 UI Fram...

2021-09-29 ‧ 由 Tilda 分享
DAY 15

DAY 15 開始設置變數吧!

_variable.sass 把所有的主要變數設置,都放到 _varialbe.sass 來統一管理,並且建立一個 main.sass,來負責引入其他 part...

2021-09-30 ‧ 由 Tilda 分享
DAY 16

DAY 16 Main 的內容

上一篇我們實作了 _variable.sass 的內容,那 main.sass 內還要放什麼呢?基本上,main.sass 就會是當作我們所有 sass 的引入...

2021-10-01 ‧ 由 Tilda 分享
DAY 17

DAY 17 製作 Nav Bar - Header

整個畫面中最先看到的是 header 的 nav bar ,就讓我們從這裡開始刻吧! 首先在 App.js 中放入 html 的內容,並且加上相應的 clas...

2021-10-02 ‧ 由 Tilda 分享
DAY 18

DAY 18 製作 Nav Bar - dropdown

針對 dropdown 的部分,我們要來細節微調他的 style ,讓他符合 vogue 上的設計,並且將 header 拉出來作為 component,讓 A...

2021-10-03 ‧ 由 Tilda 分享
DAY 19

DAY 19 製作 Nav Bar - dropdown content

針對 dropdown content,再來做一些微調,讓他更像 vogue 官方的樣式 // _dropdown.sass .dropdown po...

2021-10-04 ‧ 由 Tilda 分享
DAY 20

DAY 20 製作 Nav Bar - Scrollbar

預設時會是使用瀏覽器定義的 Scrollbar,不過 vogue 有在修改過樣式,所以我們也要跟著改囉! 關於 Scroll Bar W3 Schools 如...

2021-10-05 ‧ 由 Tilda 分享