6/16 SCSS+RWD 六角作業 2.1版寫出layout

發表於 2022-06-16 更新於 2022-06-21

版權聲明

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

引用文章

所有引用文章都貼在筆記標題之下

頁面範本

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

心得

下次工作可以加快的部分
- 發現很多重複的原件就先寫成@mixin 不要等最後在整理
  - 去參考人家寫的@mixin 改寫成自己的
- 寫 HTML 的時候
  - 寫 HTML 的時候在寫完又修改上面浪費很多時間
  - 下次
    - 先畫草圖
    - 用 screen 的模板來寫 HTML 這樣可以有一些用來排版的元件才不會遺漏
之後用用看寫一個 css library 直接套用 class

寫完程式之後的工作流程

檢查程式碼
- 添加備註
- 確定功能
- 確定程式碼安排順序
上傳到 github
整理工作時累積下來的筆記
- 先看過一次筆記
- 查詢、補充資料
- 分類 :
  1. 寫成這次工作筆記
  2. —以下放入待做事項/待寫文章列表—
  3. 要再學習一下做做看的
  4. 要寫成大文章的
  5. 要做成小作品的
放入待做事項/待寫文章列表
整理文章排版
將文章放到 HEXO

筆記新學會的

[github 問題] 某一個資料夾推不上去

新建了一个文件夹 Git 推不上去_木木木华的博客-CSDN 博客_git 提交不了新建的文件夹

新建一個新的資料夾但是沒有文件在內
空白的資料夾推不上去 ?
新增文件
再推一次

找到 FontAwesome 的 CDN 以及使用方法

使用下面網站查詢 CDN

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

HTML 在 head 加上 CDN
FontAwesome 官網複製 HTML 標籤
<i class="fa-solid fa-utensils"></i>

[HTML 問題]main 標籤的用法

HTML main 标签

使用 main 标签来展示文档的主体部分

[vscode 問題] 打開 setting.json 的文字檔

VSCode 怎么打开 settings.json 文件

shift + ctrl + p
輸入 settings.json

[RWD 問題]不讓網頁出現 X 軸

RWD 不可顯示 X 軸法則

將本來的width改成max-width就可以囉

[Sass 問題] 出現 SASS ERROR :roperties are only allowed within rules, directives, mixin includes, or other properties.`

SASS ERROR : Properties are only allowed within rules, directives, mixin includes, or other properties

在 css 選擇器外面使用@@include 就會報錯

[vscode 問題] vscode 終端不能輸入指令

修改電腦設定

電腦軟體圖標 >右鍵＞內容>相容性

vs code 终端命令不能使用解决方法

改用 git bach

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

發表於 2022-06-10

版權聲明

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

引用文章

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

心得

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

初期步驟：決定使用工具

先安裝嘗試使用安裝插件

npm
- 用來管理插件
sass
- 參考文章:
  學習 Sass 基礎 1 –Sass 是什麼如何引入
   學習 Sass 基礎 2 – 語法
git
- 開啟新的 repo
- newstarellie/RWD-SASS
  - 用於紀錄作品變化
  - 管理作品版本

找出想模仿的頁面

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

工作步驟

步驟一 : RWD 規劃

規劃 madia 斷點
CSS RWD 響應式斷點 @media 及常用尺寸速查 - VECTOR COOL 威得數位行銷
- mob 576
- pad 768
- screen 992
從哪裡開始寫 ?
- 手機使用 min-width

步驟二 : 做出 html 切版

步驟三 : 編輯 SASS

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

步驟四 : 整理程式碼

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

步驟五 : 編輯學習文章

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

學習筆記

變數設定

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

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

迴圈寫出字體大小

因為設計稿上面的文字有很多在這個區間所以寫迴圈產生他們

//for  font-s(14~22px)
@for $i from 0 through 4 {
  .font-s#{14 + $i*2} {
    font-size: 14 + 2 * $i + px;
  }
}

.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 流出空來

h2 {
  margin-bottom: 16px;
}
div:not(:last-child) {
  margin-bottom: 30px;
}

優化設定

SASS 優化我做麼什麼?

刪掉 mixin 裡面的標籤

優點:

可以靈活運用不用拘泥於原本的標籤
讓 main 裡面的階層更清楚

//原本
@mixin a-link-btn {
  a {
    background-color: $btn-hover-color;
  }
}

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

按鈕的寫法優化

//向上浮起的效果
&: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 模糊

下載 SVG 檔案
Font Awesome 各別下載 SVG 檔，並將 SVG 嵌入到 CSS，同時可設定圖示大小與顏色
工具上傳到網站獲得 url 連結
svgshare.com - share SVG vector files

新學會的

設定 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;

@mixin list-item-disc {
  display: list-item;
  list-style: disc;
  list-style-position: inside;
}

建立漢堡選單

CSS 手刻漢堡選單 Pure CSS hamburger menu

選擇 png 檔(透明

.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;
}

6/8 SCSS +RWD 基礎頁面 1.0版

發表於 2022-06-08 更新於 2022-06-09

版權聲明

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

引用文章

學習 Sass 基礎 1 –Sass 是什麼如何引入

學習 Sass 基礎 2 – 語法

RWD 01 基礎

什麼是 PostCSS？

成品

6/8 scss +RWD 基礎頁面 1.0 版

初期步驟：學習工具 /規劃頁面

基礎是啥? 掌握工具的基礎

找相關文章
- 基礎的文章優先
寫筆記
- 記錄下來作為實作的參考
- 也可以作為複習

先安裝嘗試使用安裝插件

用用看 basic

找出想模仿的頁面

基礎實作步驟 : 為了熟悉工具的使用

做出 html 切版

寫出原版的 css

修改 css 變成模組化的檔案

改用 scss 寫法
- 參考學習 Sass 基礎 2 – 語法
切分成幾個小的檔案
- 參考學習 Sass 基礎 3 – 拆分檔案的步驟

RWD 規劃

規劃 madia 斷點
從哪裡開始寫 ?
- 手機使用 min-width

實作筆記

兩種設定 flex 的方法

建立 @each 迴圈生成的 class

用在 HTML 添加 class
注意:
- 不能生成@extend

$direction-types: center, start, end, space-between, space-around, space-evenly;
@each $type in $direction-types {
  .flex-row-#{$type} {
    display: flex;
    justify-content: $type;
    align-items: center;
  }
  .flex-column-#{$type} {
    display: flex;
    flex-direction: column;
    justify-content: $type;
    align-items: center;
  }
}

<ul class="flex-row-start">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

建立 mixin

用在 css 添加@include
在 media 的時候使用

@mixin flex-row($justify-content, $align-items) {
  display: flex;
  justify-content: $justify-content;
  align-items: $align-items;
}
@mixin flex-column($justify-content, $align-items) {
  display: flex;
  flex-direction: column;
  justify-content: $justify-content;
  align-items: $align-items;
}

@include pad {
  @include flex-row(space-between, start);
  article {
    width: 75%;
  }
}

怎樣使用變數?

什麼可以寫成變數 ?

原則就是會很多次重複使用的設定就可以寫成 variable

範例: $logo-img

//注意寫法 需要" 不需要"url()"
$logo-img: "https://cdn-icons-png.flaticon.com/512/7041/7041416.png";

@mixin logo-img($logo-img, $width, $hight) {
  a {
    background-image: url($logo-img);
    width: $width;
    height: $hight;
  }
}

@include logo-img($logo-img, 50px, 50px);

命名方法 ?

讓人可以清楚明白用途的

我自己寫過覺得好用的變數 (之後會慢慢增加

//font
$font-sm: 1rem;
$font-md: 1.5rem;
$font-lg: 2rem;
$line-height: 1.5rem;
//color
$theme-color-main: #b2998e;
$theme-color-second: #dcc6c6;
$theme-color-background: #e1e0e7;
$text-color: #854e4b;
$border-color: #854e4b;
$table-color: #f6ded4;
//btn
$btn-text-color: #e1e0e7;
$btn-background-color: $theme-color-background;
$btn-hover-color: $theme-color-second;

//margin
$margin-s: 0.5rem;
$margin-m: 1rem;
$margin-l: 1.5rem;
$margin-xl: 2rem;
//pic
$logo-img: "https://cdn-icons-png.flaticon.com/512/7041/7041416.png";

什麼可以寫成 MIXIN？

比較複雜但是常用的設定
- 要一次設定很多東西怕會有遺漏就可以使用 mixin

寫成 MIXIN 的好處

寫一次之後之後可以重複使用這些設定
可以慢慢改善單一元件的功能越寫越完整
也可以參考別人的寫法改善自己的專案

例如 : logo

//logo
@mixin logo-img($logo-img, $width, $hight) {
  h1 {
    a {
      background-image: url($logo-img);
      display: block;
      width: $width;
      height: $hight;
      text-indent: -1000px;
      background-size: contain;
      background-repeat: no-repeat;
      text-indent: 101%;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

例如: 按鈕

@mixin 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;

  &:hover {
    background-color: $btn-hover-color;
  }
}

修改 prettier 設定讓 scss 自動排版

選擇設定

修改預設的 formatter

學習Sass基礎3 -- 拆分檔案的步驟

發表於 2022-06-08

版權聲明

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

引用文章

Sass @import DAY34–皮傑先生

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

筆記

步驟一 all.scss

使用 @import 功能來將本來的 all.scss 檔內的內容全部分拆成各自專屬的 scss 檔，
然後再用 @import 的方式導入進 all.scss。

通常我們的 all.scss 只會拿來 import 用

1
2
3

@import “variable”;
@import “reset”;
@import “main”;

步驟二變數

變數內容直接存入 “_variable.scss” 檔。

變數命名可以參考:

$title-color: orange;
$text-color: green;
$background-color: pink;
$base-color: yellow;
$link-color: blue;
$width: 960px;
$spacer: 30px;
$font-m: 16px;
$font-l: $font-m * 1.5;
$font-xl: $font-l * 1.5;
$font-family-title: ”monospace”;
$font-family-base: “Helverica, Ariel, sans-serif”;

步驟三其餘我們撰寫的 scss 內容存入”_main.scss”

什麼是 PostCSS？

發表於 2022-06-02 更新於 2022-06-08

版權聲明

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

引用文章

PostCSS | Summer。桑莫。夏天

後處理器

Postprocessors 的功能

加入各家瀏覽器的前綴詞（prefix），例如：-webkit-、-moz-。
將先進的功能轉為目前主流瀏覽器所能支援的語法。

Preprocessors vs Postprocessors 的區別

Preprocessors 預處理:
- 為了彌補 CSS 在大型專案維護性的不足，CSS 預處理器中新增了變數、混入、繼承、嵌套等寫法，
- 讓開發者可以更有結構地撰寫簡潔、清晰且好維護的 CSS 程式碼。
Postprocessors 後處理
- 加入前綴詞
- 詳情請看文章
  Sass/SCSS 基本語法介紹，搞懂 CSS 預處理器｜ ALPHA Camp Blog

如何加入 PostCSS？

安裝 PostCSS 與相關套件。

npm install postcss postcss-loader autoprefixer precss --save-dev

在 Webpack 設定檔加入 postcss-loader。

{
  test: /\.css$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
    },
  ],
},

RWD 01 基礎 - 什麼是RWD + 建構 RWD 的第一步

發表於 2022-06-02 更新於 2022-06-08

版權聲明

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

引用文章

前端工程師基礎 RWD 教學(一)RWD 基礎概念 @ 重金屬 AI 工程師的 Coding 分享 :: 痞客邦 ::

前端工程師的基礎 RWD 教學(一)RWD 基礎概念

什麼是 RWD

網頁的各種元素，以可以縮放、浮動的區塊來做配置，讓網頁中的各種元素，能隨著不同的瀏覽介面，而自動縮放大小以及調整排版。
響應式網站 (RWD) 是基於核心三個概念的技術的組合:
- 流動布局（Fluid Grid）
- 流動圖片 (Fluid Images)
- 及媒體查詢（Media Queries）

建構 RWD 網站的第一步

在 HTML 開始的地方加入「Viewport」語法。語法如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, minimum-scale=0.5, user-scalable=no">
width=device-width
initial-scale=1.0 「初始的比例」
maximum-scale=1.5 最大的縮放尺寸
minimum-scale=0.5 最小的縮放尺寸」
user-scalable=no 是否允許使用者自行縮放

核心三個概念 : 流動布局（Fluid Grid）

在流動布局中，寬度也常以百分比 (%) 為單位

流動圖片 (Fluid Images)

流以百分比 (%) 為單位。
在 RWD 網頁中圖片的顯示方式有兩種，
- 一種是傳統的「<img>」標籤，
- 另一種就是直接使用 CSS 的背景圖。

使用「<img>」標籤時

只需將其 width 或是 height 其中一個尺寸設定為百分比 ( % )，
另一個則設為 auto 則可以達到 RWD 的效果，

範例如下：

#banner {
  max-width: 80%; /*最大寬度設為 80% 而不是 100%，是為了避免圖片糊掉*/
  height: auto; /*高度設為 auto 好讓圖片可以等比例縮放*/
}

CSS3 的新屬性「background-size」
- 可以指定背景圖片的大小是否可填滿整個容器
  1
  2
  3
  #banner {
  background-size: cover;
  }

核心三個概念 : Liquid Layout (液態排版)

前端工程師的基礎 RWD 教學(二)流動布局 Fluid Grid

1	div｛ width: 36% ｝

核心三個概念 : 媒體查詢（Media Queries）

就是網頁會先「查詢（query)」「媒體 ( media )」的屬性，再針對這些屬性值而決定要給網頁什麼樣的樣式

Media Query 使用方法

HTML 中使用，以下範例為用 media 屬性判斷使用者的裝置大小：

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">

CSS 中使用

＠media screen and (max-device-width: 400px){…}
補充
前端工程師的基礎 RWD 教學(五)Media Query 基礎之 and/not/only 判斷條件

也可使用 @import

@import “screen.css” screen and (max-device-width: 400px)

常用媒體類型 (media-type) 的為

all (所有裝置)、
screen (螢幕裝置)、
print (印刷裝置)

常見媒體特徵 (Media Features) 有

前端工程師的基礎 RWD 教學(六)Media Query 基礎之 Media Features-上

min-width (最小寬度)、
max-width (最大寬度) 、
resolution (解析度)、
color (顏色) 等。

學習Sass基礎2 -- 語法

發表於 2022-06-02 更新於 2022-06-08

版權說明

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

引用文章

[FE201] 前端中階：那些前端會用到的工具們

課程

[week 13] 前端工具之二 - CSS 預處理器、Babel

[FE201] 前端中階的總結筆記

Install Sass

內文說明怎樣安裝

使用 SASS(SCSS)建立自己的 CSS Library :: 2021 iThome 鐵人賽

講解 Sass 的觀念時順便做出一套 CSS Library

[CSS] Sass 入門教學-新手上路重點摘要(上) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

scss 的基礎寫法

參數與結構化 CSS

巢狀結構

h1 {
  color: red;
  p {
    color: goldenrod;
  }
}
// 注意scss- 結尾要有; 否則轉檔的時候會出錯

CSS 屬性也可以巢狀

變數

$main-color:red;
$second-color: yellow;

h1 {
  color: $main-color;
  p {
    color: $second-color;
  }
}

&符號接起父層

使用&表示重複前面的 class

h2{
  color: violet;
  &:hover{
    color: $main-color;
  }

}

模組化 CSS

mixin

跟extend的區別?
- 可以引入參數
- 可以把常見的功能設定進去 mixin
跟 @function 的區別?
- 與 @mixin 的不同之處，在於 @function 只會回傳一個值，而 @mixin 是回傳一段 CSS 程式碼

可帶入多個參數

@mixin fontsizeColor($size, $color) {
  font-size: 1rem * $size;
  color: $color;
}
h2 {
  @include fontsizeColor(1, $main-color);
}

extend 繼承

注意不加上’ . ‘ 而是用%來代替

%title {
  padding: 20px;
  color: red;
}

h1 {
  @extend %title;
}

後面的設定可以覆蓋

Import

SCSS/CSS 學習筆記 - HackMD

規劃檔案的結構

(有底線代表不會被編譯成一支檔，合併使用)
_variable.scss //專門放相關變數
_mixin.scss //專門放相關mixin函式
_mixinRwd.scss //rwd media
_base.scss //全域設定SCSS
_index.scss //專案頁面SCSS

建立一支 main.scss

@import "variable";
@import "mixin";
@import "mixinRwd";
@import "base";

//你也可以建立分類的資料夾
@import "/page/index";
@import "abstracts/variables", "abstracts/functions", "abstracts/mixins";

Functions

SASS @function

可以得到一個計算的直
然後再做引用
與 @mixin 的不同之處，在於 @function 只會回傳一個值，而 @mixin 是回傳一段 CSS 程式碼

自動化 CSS

Loop

使用 `@each` 搭配 array

以逗號表示 center, start, end
#{ } 引用列表的值

$direction-types: center, start, end

@each $type in $direction-types
  .flex-#{$type}
    display: flex
    justify-content: $type
    align-items: center

使用 `@each` 搭配 map

在括號以 參數:值 表示 (center: center, start: flex-start, end: flex-end)

$types: (
//$type : $value
  center: center,
  start: flex-start,
  end: flex-end,
);
@each $type, $value in $types {
  .P-#{$type} {
    display: inline;
    justify-self: $value;
  }
}

for 迴圈

使用時機：用於預先設定，或特效網站需產生密集大小值

@for $i from 0 through 5

//加一是因為要設定h6
    .h#{5 - $i + 1}
        font-size: 1 + 0.2rem * $i

@for $i from 1 through 6 {
  h#{$i} {
    font-size: 5rem - $i * 0.5rem;
  }
}

Condition

可參考官方文件。

學習Sass基礎1 --Sass是什麼如何引入

發表於 2022-06-02 更新於 2022-06-08

版權說明

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

引用文章

[FE201] 前端中階：那些前端會用到的工具們

課程

[week 13] 前端工具之二 - CSS 預處理器、Babel

[FE201] 前端中階的總結筆記

Install Sass

內文說明怎樣安裝

使用 SASS(SCSS)建立自己的 CSS Library :: 2021 iThome 鐵人賽

講解 Sass 的觀念時順便做出一套 CSS Library

[CSS] Sass 入門教學-新手上路重點摘要(上) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

scss 的基礎寫法

其他工具

線上轉檔

SCSS
Best SCSS to CSS Converter Online
SASS
SASS to CSS Converter Online

什麼是 CSS 預處理器？ (3:58)

幫 Css 編碼用預處理器的語法寫可以寫得更快然後再轉成原本的 CSS

跟後處理器不一樣

為什麼要用 CSS 預處理器?

方便一次可已修改許多參數
不用一直打{ } 或是重複的 class
巢狀方便閱讀

CSS 在開發上可能遇到哪些問題?

全域會互相干擾
- 例如：在 index.html 同時引入 main.css 和 normalize.css 可能會互相干擾，不易進行 debug 與維護
沒有變數
- 現在有 CSS Variable
沒有辦法組合

SASS 寫一個專案會怎樣寫?

把功能都分開然後引入到 main

可以讓你清楚的管理你的 css，再者之後你需要重複的樣式，即可直接帶入
將分出的區塊以 @import 引入，完成後將所有檔案打包

main.css 通常由下列要素組成：

utils：整理出常用的 variables（背景顏色等）和 mixins（垂直至中、對齊等樣式功能）
Components：整理跨頁元件
Layouts：獨立的大元件
Pages
其他樣式：themes（dark mode）、vendors（bootstrap css）

SASS 跟 SCSS 的區別

SASS 更簡潔省去{}

還有其他處理器可用要用在查

圖片來源:

一起來用 Sass+Compass 吧，我們可是一秒幾千萬上下的前端工程師，怎麼能把時間浪費在 css 身上呢！

怎樣引入相關語法

安裝 Sass

npm install -g sass

-g 表示在全域安裝

一次性編譯

sass main.sass main.css

將 main.sass 檔編譯成 main.css

watch 模式

sass --watch main.sass main.css

每次存檔均會自動進行編譯

壓縮功能

sass --style=compressed mais.sass main.css

通常是在開發最後才會執行

5/28 寫出一個番茄鐘(五)-顯示累積工作時間 local storage + 顯示倒數計時 + 檢查輸入

發表於 2022-05-27 更新於 2022-06-01

成果

5/27 番茄鐘5 倒數計時

心得

寫不出來就用說的最直白的想要什麼功能
- EX: 三秒後要幫下一個鬧鐘倒數計時
- 用來簡化思考方式
在notion頁面上提出問題之後再一一解決
- 可以幫助我不會在多重任務中迷失
- 順便記下學到的東西從而寫成文章
直接用Notion頁面切分工作
- 可以一一測試功能
- 可以直接寫筆記最後貼上Hexo
- 比較容易找得到程式碼
console.log 加上文字
- EX : console.log(‵累積工作時間:${累積工作時間}`);
- 方便直接查看測試結果
console.log不要馬上刪掉
- 可以等文章上傳前整理程式碼的時候
- 方便觀察
- 一起整理比較快

邏輯說明

偵測輸入數字判斷正確輸入

利用ture/false
使用for 迴圈判斷input的值
- 然後改變boolen值
- 無法直接alert 在回圈內會出現多個ALERT

$("input").change(function (e) {
    e.preventDefault();
    {
      //偵測輸入數字 判斷正確輸入
      let alert1 = false;
      let a = 1;
      for (let i = 1; i < 5; i++) {
        a = $(`.clock-list div:nth-child(${i}) input`).val();
        if (a == 0) {
          alert1 = true;
        }
      }
      if (alert1 == true) {
        alert("時間設定不可為0");
        alert1 = false;
        $(".btn-start").attr("disabled", "disabled");
      } else {
        $(".btn-start").removeAttr("disabled");
      }
    }
    {
      //偵測輸入文字
      let alert2 = false;
      let b = "";
      for (let i = 1; i < 5; i++) {
        b = $(`.textSetting div:nth-child(${i}) input`).val();
        if (!b) {
          alert2 = true;
        }
      }
      if (alert2 == true) {
        alert("提醒文字必填");
        alert2 = false;
        $(".btn-start").attr("disabled", "disabled");
      } else {
        $(".btn-start").removeAttr("disabled");
      }
    }

將頁面輸入的時間形成可用的資料

let accumulationTime = 0; //所有時間總和
let accumulateArr = []; //累加時間的陣列  秒數=切換頁面狀態的時間
let originalArr = []; //個階段鬧鐘時長  原始輸入時間的陣列

//番茄鐘循環的次數
for (let n = 0; n < cycleTimes; n++) {
  //抓取頁面輸入的值
  for (let i = 1; i < 5; i++) {
    //計算所有時間總和
    accumulationTime += Number(
      $(`fieldset div:nth-child(${i}) input`).val() * 60
    );
    //形成累加時間的陣列  秒數=切換頁面狀態的時間
    accumulateArr.push(accumulationTime);
    //形成原始輸入時間的陣列
    originalArr.push($(`fieldset div:nth-child(${i}) input`).val() * 60);
  }
}

判斷當前秒數改變頁面的狀態

//利用迴圈 +判斷式 讓鬧鐘在accumulateArr的秒數切換
for (let i = 0; i < accumulateArr.length + 1; i++) {
  if (nowTime == accumulateArr[i]) {
    workTimeToLocal(workTime);
    countSecondToMinuteAndHour(workTime, ".showAccumulateTime");
    //設定鬧鐘的倒數計時時間
    countDown = originalArr[i + 1];

    //判斷鬧鐘類型 來改變頁面狀態
    if (i % 2 == 0) {
      //當下秒數 還是工作時間 所以要+1
      workTime += 1;
      $(".alarmText").text("休息時間");
      $("body").css("background-color", "green");
      textAlarm(workTimeAlarm);
    } else if (i % 2 == 1) {
      $(".alarmText").text("工作");
      $("body").css("background-color", "#FFC0BE");
      textAlarm(breakTimeAlarm);
    }
  }

計算累積工作時間

可以改 :
- if (accumulateArr[i] < nowTime && nowTime < accumulateArr[i + 1]) {
  - 這行用originalArr 作為判段
- 上面也要將originalArr 形成cycleTime的倍數陣列

if (accumulationTime > 0) {
//先載入第一個鬧鐘 因為下面的判斷式 不會算到第一個鬧鐘的時間
if (nowTime < accumulateArr[0]) {
  $(".alarmText").text("工作時間");
  $("body").css("background-color", "#FFC0BE");
  workTime += 1;
  workTimeToLocal(workTime);
  countSecondToMinuteAndHour(workTime, ".showAccumulateTime");
}

//基數鬧鐘時間 累積到工作時數
if (accumulateArr[i] < nowTime && nowTime < accumulateArr[i + 1]) {
  if (i % 2 == 1) {
    workTime += 1;
    //console.log("workTime" + workTime);
    workTimeToLocal(workTime);
    countSecondToMinuteAndHour(workTime, ".showAccumulateTime");
  }
}

每一秒改變的參數(計時

countDown -= 1; //倒數計時
//將倒數時間顯示在頁面
countSecondToMinuteAndHour(countDown, ".countDownTime");
//所有鬧鐘的時間-1 
accumulationTime -= 1;
//目前累積的時間 +1 
nowTime += 1;

將秒數轉為時分秒 + 將文字插入頁面

用於:
- 顯示倒數計時時間
- 顯示累積的工作時間

//計算秒數變成時分秒
function countSecondToMinuteAndHour(second, place) {
  //計算時間
  let showHour = Math.floor(second / 3600);
  let showMinutes = Math.floor(second / 60) % 60;
  let showSecond = second % 60;
//顯示於頁面 
  if (showHour < 10) {
//加上0 防止版型跑掉
    $(`${place} p:nth-child(2)`).text(`0${showHour}時`);
  } else {
    $(`${place} p:nth-child(2)`).text(`${showHour}小時`);
  }
  if (showMinutes < 10) {
    $(`${place} p:nth-child(3)`).text(`0${showMinutes}分`);
  } else {
    $(`${place} p:nth-child(3)`).text(`${showMinutes}分`);
  }
  if (showSecond < 10) {
    $(`${place} p:nth-child(4)`).text(`0${showSecond}秒`);
  } else {
    $(`${place} p:nth-child(4)`).text(`${showSecond}秒`);
  }
}

將累積工作時間插入到 local strage

1
2
3

function workTimeToLocal(workTime) {
    localStorage.setItem("accumulateWorkTime", workTime);
  }

累積工作時間從 local strage 抓取紀錄的值

let workTimeAlarm = $('input[id="work-time-alarm"]').val();

window.onload = function () {
if (workTime) {
  countSecondToMinuteAndHour(workTime, ".showAccumulateTime");
} else {
  workTime = 0;
  localStorage.setItem("accumulateWorkTime", 0);
}

使用程式(本次新學會的)

設定VScode comment的顏色

因為都灰灰的看起來眼睛好累

vscode 修改註釋顏色

以下文字引用自原文

安裝一個第三方主題 ,比如我喜歡的bimbo
theme目錄：C:/Users/admin/.vscode/extensions 這個目錄，選安裝了的主題，
比如我用的bimbo，然後進入下面目錄，並修改pawelgrzybek.bimbo-theme-0.2.0\themes\bimbo-theme-color-theme.json

5/27 寫出一個番茄鐘(四)-pure.css 改善頁面

發表於 2022-05-27 更新於 2022-06-02

成果

5/27 寫出一個番茄鐘(四)-pure.css 改善頁面

心得

程式碼整理

JS部分
- 檢查程式碼刪去多餘的程式碼
- 寫註解方便之後查看
CSS 部分
- 使用註解區分部位
- 確實分類好程式碼排好順序
- 試試看功能確定每行程式碼都是必須的
HTML部分
- 使用註解標明插件

使用程式(本次新學會的)

使用ColorDrop找尋好看的配色

複習註解的使用

●HTML、CSS、JavaScript如何註解? ](https://ithelp.ithome.com.tw/articles/10109611)

HTML的註解

1	<!--我是註解 -->

CSS的註解

/**我是註解/

JS的註解

1 2	/* */ 多行的註解 // 單行註解

使用pure.css

(還沒認真學過bootstrap 所以先用這個)

步驟

到官網pure.css

複製CDN

1	<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">

到左側選單找到想要的功能
複製貼上到HTML
用CSS 可以修改成自己想要的樣子

想要修改Pure.css設定

要注意link的排序

自己的檔案在最下面才能覆蓋pure.css的設定

一直吃不到效果怎麼辦?
1. 到瀏覽器DevTools (按下F12)
2. 到Element 找到那個元件的標籤
3. 向右看他的style 就會看到pure.css怎樣寫他CSS的標籤的
4. 複製他的標籤貼在在自己的css檔案裏面

在VScode使用ctrl+h 取代

VSCode windows 版本基本常用快捷鍵

用在想要修改東西的時候不用慢慢找程式碼
( 今天用在修改function名稱超級好用

版權聲明

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

引用文章

頁面範本

心得

寫完程式之後的工作流程

筆記 新學會的

[github 問題] 某一個資料夾推不上去

找到 FontAwesome 的 CDN 以及使用方法

[HTML 問題]main 標籤的用法

[vscode 問題] 打開 setting.json 的文字檔

[RWD 問題]不讓網頁出現 X 軸

[Sass 問題] 出現 SASS ERROR :roperties are only allowed within rules, directives, mixin includes, or other properties.`

[vscode 問題] vscode 終端 不能輸入指令

版權聲明

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

引用文章

心得

初期步驟：決定使用工具

先安裝 嘗試使用 安裝插件

找出想模仿的頁面

工作步驟

步驟一 : RWD 規劃

步驟二 : 做出 html 切版

步驟三 : 編輯 SASS

步驟四 : 整理程式碼

步驟五 : 編輯學習文章

學習筆記

變數設定

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

迴圈寫出 字體大小

工作方法

引用上一個專案寫出的 sass

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

優化設定

SASS 優化 我做麼什麼?

按鈕的寫法優化

logo 改成 SVG 以避免 logo 模糊

新學會的

設定 font-family

練習使用偽類 :not

練習使用 display: list-item;

建立 漢堡選單

版權聲明

引用文章

成品

初期步驟：學習工具 /規劃頁面

基礎是啥? 掌握工具的基礎

先安裝 嘗試使用 安裝插件

找出想模仿的頁面

基礎實作步驟 : 為了熟悉工具的使用

做出 html 切版

寫出原版的 css

修改 css 變成模組化的檔案

RWD 規劃

實作筆記

兩種設定 flex 的方法

建立 @each 迴圈生成的 class

建立 mixin

怎樣使用變數?

什麼可以寫成變數 ?

命名方法 ?

我自己寫過覺得好用的變數 (之後會慢慢增加

什麼可以寫成 MIXIN？

寫成 MIXIN 的好處

例如 : logo

例如: 按鈕

修改 prettier 設定 讓 scss 自動排版

選擇設定

修改預設的 formatter

版權聲明

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

引用文章

筆記

步驟一 all.scss

步驟二 變數

步驟三 其餘我們撰寫的 scss 內容存入”_main.scss”

版權聲明

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

引用文章

筆記新學會的

[vscode 問題] vscode 終端不能輸入指令

先安裝嘗試使用安裝插件

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

迴圈寫出字體大小

SASS 優化我做麼什麼?

建立漢堡選單

先安裝嘗試使用安裝插件

修改 prettier 設定讓 scss 自動排版

步驟二變數

步驟三其餘我們撰寫的 scss 內容存入”_main.scss”

使用 `@each` 搭配 array

使用 `@each` 搭配 map

把功能都分開然後引入到 main

怎樣引入相關語法

偵測輸入數字判斷正確輸入