/3 min
透過 Mixin，統整需要重複使用的 Sass 語法！
在一般程式中如果有需重複使用的程式，我們會使用 function 來進行統整後，需要執行時再呼叫這個 function；在 Sass 裡我們能夠透過 Mixin 來達到與 function 統整重複程式碼的效果。
#CSS
/1 min
使用 @import 讓你 Sass 切分檔案、維護管理更方便！
我們都知道一支檔案篇幅不要太長，因此就需要透過載入檔案方式來進行整合。而 Sass 則可透過 import 這個語法載入其它樣式。 基本寫法 以下語法皆以 SCSS 撰寫。
/1 min
原來 CSS 也有原生變數可以使用
之前使用 SCSS 慣了，每次如果想要在樣式表使用變數就會直覺想到使用預處理器，結果前陣子才發現原生的 CSS 也有變數功能可以使用，那就來記錄一下吧。
/5 min
Sass / SCSS 筆記：如何利用變數管理重複設定值？
使用 Sass / SCSS 管理 CSS 內容，除了能夠撰寫巢狀式語法架構外，還有像是變數、Mixin 等功能，可以幫助我們管理重複的 CSS 設定值或是語法，不但能夠優化 CSS 空間，也能夠增加日後開發的方便性。
/6 min
更便利於撰寫與管理 CSS 的工具 - Sass / SCSS，如何使用、編譯？
CSS 在網頁上的需求愈來愈多，但是在愈寫愈多的情況下，預設的 CSS 語法可能無法滿足，管理上也比較不易，而今天要介紹的 Sass / SCSS 就能夠幫助我們更方便於 CSS 的撰寫與管理。
/3 min
RWD 響應式網頁設計該注意的 UI 細節
早期只有電腦上網時期，只要針對電腦設計網頁即可。然而行動上網的普及，也促成了 RWD 的發展。然而設計響應式網頁時，並不是單純讓視窗大小能夠維持不跑版這麼簡單，還有更深入的設計細節。
/8 min
運用 CSS 媒體查詢語法開發 RWD 響應式網頁
隨著時代的進步，上網的載具愈來愈方便，從早期的電腦，到後來的平板、手機，甚至於是超大型螢幕，已經不止傳統的 1024 768 解析度螢幕。而這麼多變的螢幕大小，正考驗著網頁開發者的功夫啊！
/9 min
有哪幾種指定 CSS 樣式的方式？權重又是什麼？能吃嗎？
網站的開發當中，若要設定 CSS，我們除了能夠針對網頁的標籤、class 進行指定，其實還有其它方式都能夠指定 CSS 樣式至我們希望呈現樣式的區塊，至於有那些呢，這篇文章就會來提到。
/5 min
Flex 強大排版術：align-items、align-content 傻傻分不清楚？align-self 又是什麼？
前面發了兩篇的 Flex 排版技術文章、也提到了許多主軸的排版方式，今天就要來介紹交錯軸 align-items。
/2 min
Logo 不只能用 img，來試試 background 圖片取代文字技巧！
一般來說新手時期在設置 Logo 時都會使用 HTML 的 img 標籤將圖片展示出來，不過其實除了 img 之外，還能夠使用 background 背景圖片，並使用圖片取代文字的技巧來設置 Logo。
/6 min
Flex 強大排版術：主軸對齊怎麼做？為何都擠在同一排？相應屬性一次解說！
上一篇 Flex 筆記文章介紹了它的主軸與交錯軸觀念，今天要來介紹的是主軸的對齊，就像文字有所謂的靠左對齊、置中對齊、靠右對齊或是分散對齊，Flex 的排版方式也能夠達成這樣的效果。
/8 min
Flex 強大排版術：flex-direction 如何應用？主軸、交錯軸附圖解說！
網頁排版技術非常多，包含 float、inline-block、Flex 或是 grid 等等，其中 Flex 是現今滿常見的排版技術，使用這個技術，也能夠較為輕鬆地達到所謂的水平垂直置中，那要如何使用這項技術呢？
/4 min
什麼是 background？跟 img 的差別？image、repeat、color 以及 position 等屬性又該如何設定？
CSS 除了透過 img 顯示圖片外，還有 background 可以用於顯示背景圖片，當然它並不只有背景圖片的技巧，如果要設定背景顏色也是可以的，今天就來介紹一下 background 相關應用。
/2 min
網頁樣式跟想像中不一樣，你 CSS Reset 了嗎？
當透過 CSS 切完網頁版面後，發現網頁跟自己想像或是設計稿上顯示的有落差，是發生了什麼事情？ CSS Reset 出現與存在意義 之所以會有 CSS Reset 出現，是因為早期瀏覽器在渲染 HTML 的 CSS 樣式…
/3 min
想要提升寫 code 效率，一定要認識的寫網頁好幫手 - Emmet
Emmet 是個支援多個編輯器的擴充程式，幫助我們在寫程式時，只要記相對應的縮寫，就能完整將關鍵字打出來。 優點 提升開發速度 減少打錯字造成後續 debug 的時間 目前預設 VS code 已經內置了 Emmet，要…
/9 min
Bootstrap 5 新手教學實戰營 - Week 2
這篇是 Bootstrap 5 新手教學實戰營的第二次上課筆記，學習重點主要是格線系統的應用以及在各個不同大小的裝置上，格線系統的呈現方式，以及相關觀念。 在介紹格線系統之前，先讓我們認識一下「魔術數字」。
/4 min
Bootstrap 5 新手教學實戰營 - Week 1
疫情在家，就上網搜尋了一下有什麼東西可以打發時間，就發現了六角學院推出的「21 天 Bootstrap 5 新手教學實戰營」，既然要少出門，那就來報名好好充實一下自己的技術！ 什麼是 Bootstrape？