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

閱讀時間約 8 分鐘

我在準備進入切版的第一步通常會是設定好全域樣式,以及整理出有哪些共用樣式,也就是把設計稿上規範好的設計系統,例如顏色、間距、字體等等先寫好 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檔分門別類的管理



謝謝收看 🎉

2會員
21內容數
關於 Html 、 Css 、JS 等相關程式語言的學習筆記或開發紀錄
留言0
查看全部
發表第一個留言支持創作者!