Ellie's Blog
0%

6/10 SCSS+RWD 六角作業 2.0版 寫出layout

發表於

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

一變應萬變的響應式網頁設計

心得

  • 這周工作時間都會使用番茄鐘，有了中間五分鐘的休息時間，讓我可以調整自己現在的工作狀況，回到主線任務，不會像以往，在一些小細節上花費太多時間、或根本忘記工作主軸。
  • 我之前就有利用 Notion 將大任務切割成小任務的習慣，但成效並不太好，
    • 本周加上了番茄鐘，將時間也切割成小區塊，可以幫助我掌控每項任務所花費的時間，
    • 這樣的工作方式很有成就感，感覺自己像是玩遊戲一般，破解任務，且隨著等級提高，會清楚的感覺到完成任務的時間慢慢縮短了。

初期步驟：決定使用工具

先安裝 嘗試使用 安裝插件

找出想模仿的頁面

以下為六角課程提供的作業

工作步驟

步驟一 : RWD 規劃

步驟二 : 做出 html 切版

步驟三 : 編輯 SASS

  • 筆記請往下看學習筆記
  • 一遍紀錄遇到的問題 以及解決方法
    • 作為最後編輯學習文章的材料

步驟四 : 整理程式碼

  • SASS 的部分
    • 利用 comment 將程式碼分類 方便日後尋找
    • 重新瀏覽 變數
      • 確定名稱合適 方便重複使用
    • 重新瀏覽 mixin
      • 確定名稱合適 能夠闡明用途
      • 確定選擇器的範圍選擇 以利重複使用

步驟五 : 編輯學習文章

  1. 將步驟三遇到的問題及解答重新整理
  2. 貼上程式碼
  3. 排版
  4. 上傳到 hexo

學習筆記

變數設定

設定變數: 上傳圖片 抓取顏色

擷取圖片上的顏色(RGB,HEX,CMYK)

迴圈寫出 字體大小

  • 因為設計稿上面的文字有很多在這個區間 所以寫迴圈產生他們
1
2
3
4
5
6
//for  font-s(14~22px)
@for $i from 0 through 4 {
  .font-s#{14 + $i*2} {
    font-size: 14 + 2 * $i + px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.font-s14 {
  font-size: 14px;
}

.font-s16 {
  font-size: 16px;
}

.font-s18 {
  font-size: 18px;
}

.font-s20 {
  font-size: 20px;
}

.font-s22 {
  font-size: 22px;
}

工作方法

引用上一個專案寫出的 sass

  • 繼續優化自己的 libray 成為日後專案的資料庫

觀察頁面的 margin .padding 盡量統一設定

  • 觀察到 h2 下面的空格
  • 觀察到每個 div 的間距
    • 除了最後一個除外 因為他有 footer 的 padding 流出空來
1
2
3
4
5
6
h2 {
  margin-bottom: 16px;
}
div:not(:last-child) {
  margin-bottom: 30px;
}

優化設定

SASS 優化 我做麼什麼?

  • 刪掉 mixin 裡面的標籤

  • 優點:

    • 可以靈活運用 不用拘泥於原本的標籤
    • 讓 main 裡面的階層更清楚
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //原本
    @mixin a-link-btn {
      a {
        background-color: $btn-hover-color;
      }
    }

    //改成
    @mixin a-link-btn {
      background-color: $btn-hover-color;
    }

按鈕的寫法優化

1
2
3
4
5
6
7
8
9
//向上浮起的效果
&:hover {
  transform: scale(1.05);
}
//向下沉 還有陰影的效果
&:active {
  transform: scale(1);
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.2);
}

logo 改成 SVG 以避免 logo 模糊

新學會的

設定 font-family

font-family 要怎麼玩

1
2
3
body {
  font-family: "微軟正黑體";
}

練習使用偽類 :not

使用注意事項:

:not() - CSS（层叠样式表） | MDN

CSS :not 伪类可能错误的认识 “ 张鑫旭-鑫空间-鑫生活

1
2
3
div:not(:last-child) {
  margin-bottom: 30px;
}

練習使用 display: list-item;

Untitled

1
2
3
4
5
@mixin list-item-disc {
  display: list-item;
  list-style: disc;
  list-style-position: inside;
}

建立 漢堡選單

CSS 手刻漢堡選單 Pure CSS hamburger menu

  • 選擇 png 檔(透明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.show-menu {
  //為了可以在其他media尺寸之下隱藏
  a {
    @include a-link-img($menu-btn-img, 24px, 24px);
  }
}

//<a>btn
@mixin a-link-btn {
  display: block;
  padding: 0.5rem;
  background-color: $btn-background-color;
  border: $btn-background-color solid 1px;
  border-radius: 5%;
  text-decoration: none;
  color: $text-color;
  text-align: center;
  font-weight: bold;
}