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

目錄

• 那些不太熟/現在開始優化吧!的CSS們+知識補充
  • 目錄
  • 手寫 SCSS 結構參考
    • _helpers.scss 可以放什麼呢?
  • font-family
  • font-size變數
  • 色彩
  • 間距
  • 使用 img 標籤搭配 object-fit
  • calc() 數值運算
  • 知識補充
    • CSS Reset 差異

---

手寫 SCSS 結構參考

@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：圖片取代文字
  ​​​​.header h1 a {
  ​​​​    display: block;
  ​​​​    background-image: url();
  ​​​​    width: 100px;
  ​​​​    height: 50px;
  ​​​​    text-indent: 101%;
  ​​​​    overflow: hidden;
  ​​​​    white-space: nowrap;
  ​​​​}
  

• 舉例2：三角形
  ​​​​.triangle {
  ​​​​    width: 0;
  ​​​​    height: 0;
  ​​​​    border-style: solid;
  ​​​​    border-width: 0 24px 32px 24px;
  ​​​​    border-color: transparent transparent #007bff transparent;
  ​​​​}
  

• 舉例3：單行、多行內文溢出隱藏
  ​​​​/* 單行 */
  ​​​​.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;
  ​​​​}
  

連結補充：

• 可以參考Bootstrap 5的helpers規劃： https://getbootstrap.com/docs/5.0/helpers/clearfix/
• 三角形產生器：http://apps.eky.hk/css-triangle-generator/zh-hant

---

font-family

• 英文優先(偶爾會忘記)

body{
    font-family: 'Roboto', 'Noto Sans TC', sans-serif;
}

• 可以搭配變數

body{
    font-family: $font-noto, $font-roboto, --apple...
}

//_variables.scss

$font-noto: 'Noto Sans TC', sans-serif;
$font-roboto: 'Roboto', sans-serif;

若是使用下載的字型可以在 assets 內新增一個 fonts 資料夾來放，並嘗試使用 @font-face 來引入
下載字體，在 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名稱

$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命名，但有時候還是會不小心顏色本身為名稱

$color-primary: #AA0601;
$color-dark-red: #650300;
$color-pink: #FBF2F2;

建議可修改為:

$color-primary: #AA0601;
$color-primary-dark: #650300;
$color-primary-light: #FBF2F2;

---

間距

可以參考Bootstrap
<div class="mb-3 mb-md-3 mb-sm-2">...</div>

.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 差異

meyerweb CSS Reset：https://meyerweb.com/eric/tools/css/reset

​​​​Reset CSS，優勢是把所有東西都清空(h1.h2....)

Normalize：https://necolas.github.io/normalize.css/

​​​​bootstrap 是使用Normalize<br>保留一些預設樣式，例:ul,li樣式

---