［前端］切版起手式 : 用 SCSS 自訂義全域樣式

我在準備進入切版的第一步通常會是設定好全域樣式，以及整理出有哪些共用樣式，也就是把設計稿上規範好的設計系統，例如顏色、間距、字體等等先寫好 CSS，而我自從會 SCSS 後就習慣用這個方式去寫 CSS，透過分成不同檔案、依序載入，日後在修改跟維護上會比較好管理跟減少時間。

視專案大小或需求，決定是否要引入 Bootstrap、tailwind 等框架，單純一點的專案可能自己寫就可以滿足需求。這篇紀錄的是不套用框架，我自己在開版時習慣的步驟與內容，這些內容也會隨著我的經驗隨之調整，同時也歡迎留下你的經驗或看法 !!

步驟一 : 引入 reset.scss

每一個 HTML 標籤元素都有 CSS 預設值，例如預設的margin 、padding …等，這些預設的 CSS ，有些會為網頁設計師做 CSS 排版時帶來不便，所以通常第一步是清除這些預設值，這邊筆者常用的是 meyerweb.com，複製程式碼到專案裡就完成了!

想了解更多可以參考 [第七週] CSS — 起手式及常被問到的問題 這篇文章~

步驟二 : base.scss 放入全站設定

新增 _base.scss 檔案，放入一些全站設定，例如字體、1rem 的大小等，這裡其實因人而異，沒有一定，筆者這邊先放上自己常用的給予參考

*,
*::before,
*::after { 
	box-sizing: border-box; 
} 

html { 
	font-size: 16px; 
} 

body { 
//字型名稱之間如果有空格的話需要用引號包起來，若是中文字型建議用英文名子呈現 
// ex.微軟正黑體改成 "Microsoft JhengHei" 
	font-family: 'Noto Sans TC', 
	sans-serif; font-size: 1rem; // 16px 
	line-height: 150%; 
} 

// img RWD
img {
	 max-width: 100%; 
	 height: auto; 
	 display: block; 
} 
 
 // a連結 
 a { 
 	display: block; text-decoration: none;
 } 
  
 // sub 因為 css reset 會取消 sub 的樣式 
 sub { 
	 vertical-align: sub; 
 } 
 
 // container 
 .container { 
	 max-width: 1120px; //可以自訂義寬度，詳請請見*註一 
	 margin: 0 auto; 
	 padding-left: 16px; 
	 padding-right: 16px;
 } 
  
 @media screen and (max-width: 376px) { 
	 .container { 
	 max-width: 355px; 
	 margin: 0 auto; 
	 padding-left: 10px; 
	 padding-right: 10px; 
	 } 
 }
 
 

註一 : 在寬度的設定上，瀏覽器的總寬度通常為裝置比例高的 1920px 或 1440px，
但內容寬度不要同樣設成 1920px 或 1440px，可以設定為 1220px 或參考 bootstrap 的
container 寬度 (max-width:1220px)，讓容器寬度是一個讓眼睛舒服瀏覽的寬度。​

header 或 footer 若希望是滿版的背景，可以直接在 div 設定 background ，
不用寫 width=100%，因為 div 本身會自適應寬度。

步驟三 : variables.scss 放入共通樣式

新增 _base.scss 檔案，放共通樣式，例如主顏色、次顏色、間距等等。

以下為範例，實際數值需要視每個專案的設計喔。

// scss-docs-start theme-color-variables 
$primary: #56C4C5; 
$secondary: #FF5D50; 
$black: #221E1F; 
$white: #FFFFFF; 
$gray: #F5F5F5; 

// scss-docs-end theme-color-variables 
// scss-docs-start box-shadow-variables 
$box-shadow: 0px 2px 10px #00000014; 

// scss-docs-end box-shadow-variables 
$component-active-color: $white ; 
$component-active-bg: $primary ; 

// stylelint-disable value-keyword-case 
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" 
; 
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; 
$font-weight-regular: 400; 
$font-weight-bold: 700;
$font-size-base: 4px; 
$font-m: $font-size-base* 4;//預設字型大小
$h1-font-size: $font-size-base * 1 ; 
$h2-font-size: $font-size-base * 12; //48px 
$h3-font-size: $font-size-base * 8 ; //32px 
$h4-font-size: $font-size-base * 6 ; //24px 
$h5-font-size: $font-size-base * 5; //20px 
$h6-font-size: $font-size-base * 4.5 ; //18px 
$line-height-base: 1.5;

步驟四 : layout.scss 布局管理

這邊的樣式專門設定每一個頁面都有的布局 ex. header footer 等

這邊有個建議作法是在命名 class name 時，可以用個前贅詞示意此為 layout 。

ex. .l-list(O) bookList(X)

步驟五 :module 放入模組化內容

也等同 componets，命名方式可以參考 bootstrap

例如一個按鈕可區分為 :

.btn : 容器相關css

.btn-primary : 樣式相關 css

.btn-lg : 尺寸相關 css

這個概念來自於使用 OOCSS 讓容器與內容分離，未來比較好擴充與維護唷!

以上步驟比較偏向於個人實際做法，非絕對~實際狀況會依每個人工作習慣以及專案而有不同。想了解更多可以再參考以下文章~

使用 @import 讓你 Sass 切分檔案、維護管理更方便！

Sass 的 @import 功能，如何讓scss檔分門別類的管理

謝謝收看 🎉