Day 17 - 開發小知識(一) : Css reset、SASS/SCSS

每日一談

嗨，大家好 ! 我是阿蘇
今天是 Day17 ， 來分享再正式開發我們會用到的 Css reset 及進階的 SASS/SCSS 管理技巧

是不是覺得瀏覽器預設樣式很討厭，討厭的margin 、padding，讓我們再寫 css 樣式很麻煩，在正式開發上一般我們也會使用 Css reset 將預設樣式清除 ; SASS/SCSS 管理也是開發上很重要的一環，好的架構規劃讓我們後續維護便利，也能在開發上分隔清楚不會找不到樣式。

Css reset

為什麼要使用 Css reset ?

• 瀏覽器預設樣式不統一
• 惱人的基礎樣式， 我想要自己寫

有一張圖來理解 css reset ，一般我們在寫時都會使用 css reset 來清除樣式，

常用 Css reset

• meyerweb
• Normalize

載入 Css reset
這邊以 meyerweb 為例 ，我們可以看到這是常用的 css reset ，他寫好了css幫你做清除，我們可以把這段複製到你的 css 樣式上，就會發現我們成功清除樣式了，試試看吧 !

meyerweb VS Normalize

該選擇使用哪個Css reset

• meyerweb
  清空所有預設樣式、想自己從頭寫 CSS 樣式、設計稿沒有規律性變化性較大

• Normalize

• 保留部分樣式，像是H1~H6的基本設定、list的基本設定及基本間距，bootstrap也是以這為基礎，適合用在有規律的設計稿，有基礎樣式開發

CSS開發小知識 - SASS/ SCSS

當你CSS開始慢慢熟練後，可以開始學習 CSS 預處理器，這邊來跟大家簡單介紹下 CSS 預處理器 - SASS/ SCSS

使用之優點

• 巢狀結構 ， 階層分層更明確

• 變數運用 ( 色票管理、文字大小管理)
  

• mixin 省下重複撰寫 css 時間，再透過 include 載入樣式

• import 拆分 css ，讓 css 更好管理

範例 - 專案 import 拆分 css

css 的拆分檔案管理，也有分類規律，大家不妨可以上網多看看scss 架構再去做自己專案規劃

學習css 預處理器，雖然講了很多優點，不過這邊大概帶過概念，怕初學者可能會不是很理解，簡單來說 CSS 預處理器可以幫助我們寫的寫法更簡單、結構更便利、管理更方便、然後可以讓我們省下更多的開發時間，試著摸索看看吧 !

編譯轉化 CSS
一般網頁無法讀取SASS/SCSS，預處理器是方便我們撰寫CSS，所以他需要透過編譯轉化成CSS，網頁才能讀取

VSCODE 編譯 SASS/SCSS 模組

編譯方式有很多種，或是使用VSCODE的模組，只要可以轉化都可以 !