那些不太熟/現在開始優化吧!的CSS們+知識補充

--- tags: 前端開發 --- # 那些不太熟/現在開始優化吧!的CSS們+知識補充 ## 目錄 [TOC] --- ## 手寫 SCSS 結構參考 ```css= @import "variable";// 變數 @import "reset"; // reset.css @import "base"; // 全站設定 @import "util"; // 通用工具類 class，.mb-1、.pr-3 (util 是最小單位，只有一行設定) @import "helpers"; // 小功能但永遠都記不住的酷東西 // layout 共同框架,第一層 @import "layout/header"; @import "layout/footer"; @import "layout/menu"; @import "layout/aisde"; // 頁面設計 @import "pages/index"; @import "pages/cart"; ``` ### _helpers.scss 可以放什麼呢? * 舉例1：圖片取代文字 ```css= .header h1 a { display: block; background-image: url(); width: 100px; height: 50px; text-indent: 101%; overflow: hidden; white-space: nowrap; } ``` * 舉例2：三角形 ```css= .triangle { width: 0; height: 0; border-style: solid; border-width: 0 24px 32px 24px; border-color: transparent transparent #007bff transparent; } ``` * 舉例3：單行、多行內文溢出隱藏 ```css= /* 單行 */ .text_1 { width: 200px; overflow: hidden; white-space: nowrap; /* 當內文溢出時，以...表示超出的內文 */ text-overflow: ellipsis; } /* 多行 */ .text_2 { width: 200px; overflow: hidden; /* 將對象作為彈性伸縮盒子模型顯示 */ display: -webkit-box; /* 子元素排列方式 */ -webkit-box-orient: vertical; /* 顯示的行數，多出的部分會顯示為... */ -webkit-line-clamp: 3; } ``` :::warning :bulb: 連結補充： * 可以參考Bootstrap 5的helpers規劃： https://getbootstrap.com/docs/5.0/helpers/clearfix/ * 三角形產生器：http://apps.eky.hk/css-triangle-generator/zh-hant ::: --- ## font-family * 英文優先(偶爾會忘記) ```css= body{ font-family: 'Roboto', 'Noto Sans TC', sans-serif; } ``` * 可以搭配變數 ```css= body{ font-family: $font-noto, $font-roboto, --apple... } ``` //_variables.scss ```css= $font-noto: 'Noto Sans TC', sans-serif; $font-roboto: 'Roboto', sans-serif; ``` > 若是使用下載的字型可以在 assets 內新增一個 fonts 資料夾來放，並嘗試使用 @font-face 來引入 > 下載[字體](https://www.google.com/get/noto/#sans-hant)，在 style 內新增一個 SCSS 檔案來使用 @font-face 設定字體，並在 all.scss 一開始 @import ``` @font-face { font-family: "Noto Sans CJK TC Regular"; /* 這個可以自己取名 */ src: url(../fonts/NotoSansCJKTC/NotoSansCJKtc-Regular.otf); /* 這是我的路徑 */ font-weight: normal; } ``` --- ## font-size變數盡量不要寫死h1, h2, ....等html標籤(但是base還是可以放入當預設) 或是.h1, .h2,..等Class名稱 ```css= $font-size-base: 1rem; //16px $font-size-sm: $font-size-base * 0.875; //14px $h1-font-size: $font-size-base * 4; //64px $h2-font-size: $font-size-base * 3; //48px $h3-font-size: $font-size-base * 1.75; //28px $h4-font-size: $font-size-base * 1.5; //24px $h5-font-size: $font-size-base * 1.25; //20px $h6-font-size: $font-size-base; //16px ``` --- ## 色彩用 SCSS 設定顏色變數，不建議使用顏色本身為名稱 > 通常我也是會使用primary, secondary命名，但有時候還是會不小心顏色本身為名稱 ```css= $color-primary: #AA0601; $color-dark-red: #650300; $color-pink: #FBF2F2; ``` 建議可修改為: ```css= $color-primary: #AA0601; $color-primary-dark: #650300; $color-primary-light: #FBF2F2; ``` --- ## 間距可以參考Bootstrap `<div class="mb-3 mb-md-3 mb-sm-2">...</div>` ```css= .mb-3{ margin-bottom: 16px; } //平板 @media (max-width: 576px) { .mb-md-2{ margin-bottom: 8px; } } //手機 @media (max-width: 375px) { .mb-sm-1{ margin-bottom: 4px; } } ``` SCSS 的迴圈 @for from through >>想學! --- ## 使用 img 標籤搭配 object-fit https://wcc723.github.io/development/2020/10/11/img-cover/ --- ## calc() 數值運算 --- ## 知識補充 ### CSS Reset 差異 :::spoiler {state="open"} meyerweb CSS Reset：https://meyerweb.com/eric/tools/css/reset Reset CSS，優勢是把所有東西都清空(h1.h2....) ::: :::spoiler {state="open"} Normalize：https://necolas.github.io/normalize.css/ bootstrap 是使用Normalize 保留一些預設樣式，例:ul,li樣式 ::: ---