鐵人檔案
從零開始學 SASS！
隨著現代專案越來越大型，協作的風氣盛行，我們最獨樹一格的前端三兄弟，還只有 CSS 駐足不前嗎？錯！在這幾年內，CSS 也成了獨當一面的大人了，發展了預處理器，讓設計 property 的方法更有彈性。
下次你在前端刻板的時候，不妨來試試看 SASS 吧！
Operators 有時候畫面的比例，會影響 CSS 顯示的效果，而在 SASS 中，我們可以用數學的運算公式去調整 style 中的內容，讓設計樣式更加聰明的...
介紹完了前幾天的 sass 各種用法，大家有沒有覺得有些方法好像很類似？ 像是 mixin 跟 extend，兩個都是預先寫好，再引入使用的做法。 差別只在於...
接下來的天數，預計要來實作上面已經教學的 sass 方法，畢竟學習是一回事，真正拿來實作則是另一回事，好的實作可以讓你更熟悉 sass 的操作方法以及 mixi...
在開始實作畫面之前，我們先來了解一下常見的 UI Framework，並瞭解他們的設計方式，以便後續做設計上的 sass 結構參考吧！ 常見的 UI Fram...
_variable.sass 把所有的主要變數設置，都放到 _varialbe.sass 來統一管理，並且建立一個 main.sass，來負責引入其他 part...
上一篇我們實作了 _variable.sass 的內容，那 main.sass 內還要放什麼呢？基本上，main.sass 就會是當作我們所有 sass 的引入...
整個畫面中最先看到的是 header 的 nav bar ，就讓我們從這裡開始刻吧！ 首先在 App.js 中放入 html 的內容，並且加上相應的 clas...
針對 dropdown 的部分，我們要來細節微調他的 style ，讓他符合 vogue 上的設計，並且將 header 拉出來作為 component，讓 A...
針對 dropdown content，再來做一些微調，讓他更像 vogue 官方的樣式 // _dropdown.sass .dropdown po...
預設時會是使用瀏覽器定義的 Scrollbar，不過 vogue 有在修改過樣式，所以我們也要跟著改囉！ 關於 Scroll Bar W3 Schools 如...