# 六角試上紀錄
## SCSS
### 樣式管理
一般架構，一支總檔案（ all.scss or global.scss or main.scss）內 import 各個架構內容，最後在統一編譯，如此一來有些每個專案都會共用的檔案就可以不用每次都寫，而是透著種方式引入管理，並且每一支檔案都有各自的任務會更方便除錯跟管理。
> 小備註 : 檔名前面 " _ " 的 SCSS 就不會被編譯
> 要注意載入順序
```css=
@import '_reset.scss'; // 重置適用於各瀏覽器的 CSS 預設
@import '_media-breakpoint.scss'; // RWD 的各裝置斷點
@import '_variable.scss'; // 變數集中區
@import '_mixins.scss'; // mixin樣式集中區
@import '_common-setting.scss'; // 可共用於各個區塊裡變的樣式
@import '_main.scss'; // 主要內容
```
我自己的總結 : 用一支 all.scss 來 import 其他支 scss
### 編譯
1. 軟體編譯 ex : prepros
2. 打包工具編譯 ex : gulp 、 webpack
3. 編輯器內的插件 ex : live sass compiler (我目前是用這個而已)
### 連接符號 &
& 代表該 class 或標籤本身，透過連接符可更加有效率撰寫偽元素以及該 class 加上另一 class 的情況
以下範例為按鈕樣式，如果又有 .pink_btn 時使用一張背景圖，當被點擊時又切換另一張背景圖
```css=
button {
background-size: cover;
background-color: transparent;
cursor: pointer;
border: 0;
&.pink_btn {
background-image: url('../../Content/img/button01.png');
transition: .2s;
&:active {
background-image: url('../../Content/img/button01_active.png');
}
}
}
```
### 變數 variable
錢字號 $ 作為變數命名開頭，便於統一調整，命名也可以語意化便於管理
有哪些東西適用變數管理？
1. 顏色
2. 文字設定 ( 字型可以用字串型態表示 )
3. 行距
一些會重複5次以上的情況時就可以考慮使用
### 運算
可以直接在樣式中做運算，不用加 calc
```css=
$font_xl: 24px;
h1 {
font-size: $font_xl * 1.2; // 36px
}
```
### 內建函式
某些情況時運用，例如設計師只有定義好連結的顏色但是沒有定義各個狀態的顏色
```css=
.box {
background: #c4006f;
&:hover: darken(#c4006f,20%); // 顏色,暗化百分比
&:active: lighten(#c4006f,10%); // 顏色,亮化百分比
}
```
### 關於 reset
清除預設的設定，通常使用第三方已寫好的 CSS Reset or Normalize
兩者差別在完全清空跟保有一些預設樣式，目前我都直接用 reset 從零開始比較無腦
如何使用? 直接網上載下來後存成一支 scss 後 import 到專案內即可
### @mixin
重複性 CSS 語法技巧紀錄，需要時候 @include 取用，有一點像是變數的應用，但一次可以記錄一串語法，並且還可以傳入參數來產生變化，參數可以是複數個，很像 function 的用法 ; 另外 RWD 的樣式也透過此方式撰寫會更有效率更好管理
```css=
@mixin h1_xxl {
font-size: 1.8rem;
color: #e14f7c;
line-height: 2.5rem;
}
h1 {
@include h1_xxl;
}
```
設定一個樣式，在不同使用情況下定義不同顏色
```css=
@mixin color($color) {
color: #color
border: 2px solid $color;
}
.box {
@include color(#ffeaac);
}
```
我目前使用的斷點設定
```css=
@mixin xxl {
@media (max-width: 1679.98px ){
@content;
}
}
@mixin xl {
@media (max-width: 1199.98px ){
@content;
}
}
@mixin lg {
@media(max-width: 991.98px) {
@content;
}
}
@mixin md {
@media (max-width: 767.98px) {
@content;
}
}
@mixin sm {
@media (max-width: 575.98px) {
@content;
}
}
@mixin xs {
@media (max-width: 414.98px) {
@content;
}
}
@mixin xxs {
@media (max-width: 374.98px) {
@content;
}
}
```
### OOCSS
1. 結構與樣式分離
2. 容器與內容分離
舉例情況，今天我在 header 跟 footer 都有一樣樣式的連結內容，但是因為個別包在結構裡面，所以一般寫法就會是重複寫相同的程式碼，但更好的方法就是把一樣樣式的內容抽出寫成單獨的 class 在不同的構佈局中在套用，如此一來即可達成元件化的實現，也就如同當前許多框架的運作方式
* 最終目的就是為了減少寫重複的語法，讓一個 class 可以在不同地方重複使用且不衝突
我預想可以元件化的工具型 class
```css=
```
## JS
### 任務拆解 流程設計
將大項目開解成多個小項目執行，依序判斷，一步一步就先測試
[whimsical]([https://](https://whimsical.com/the-beginning-9XhD9GSSDWMxPrpjStHSRq))
#### 字串相加
使用 + 號連結字串，空白可使用 ' ' 做為中間連結
```javascript=
let a = 'Tom' + ' ' + 'is good!'
```
#### 型別判斷
```javascript=
let age = 18
console.log(typeof age) // number
```
#### 自動轉型
```javascript=
let name = 'Tom'
let age = 18
console.log(name + age) //number 轉為 string
```
#### NAN
```javascript=
let a = '12'
let b = 'Allen'
console.log(a*b) //NAN
console.log(parseInt(a)) // 12
console.log(parseInt(b)) // NAN
```
#### String method
去除前後空白字元
```javascript=
let b = ' Allen '
console.log(b.length) //7
b = b.trim()
console.log(b.length) //5
```
#### 樣板字串 Template literals ES6
省去字串相加直接使用重音符連接
```javascript=
let a = 'Allen'
let b = 18
let content = `我是${a}，年紀${b}歲`
console.log(content)
```
#### 數字轉字串
```javascript=
let a = 15
a = a.toString()
console.log(a) //'15'
```
#### 陣列
splice(a,b) 兩個參數
從第幾個開始,刪除幾筆資料
```javascript=
let ary = [1, 2, 3, 4]
ary.splice(0,1)
console.log(ary)
```
#### 物件
刪除物件內容
```javascript=
let obj = {
name : 'ass',
count : 99
}
delete obj.name
console.log(a)
```
讀取物件內容，使用此方式讀取，中括號包字串，屬性名稱是數字時依然能取得值
```javascript=
let obj2 = {
name : 'apple',
count : 99,
taste : 'good'
}
let a = obj2['name']
console.log(a)
```
#### JSON
跟物件差別在 key 是用 "" 包起來的
[高雄市政府開放資料平台]([https://](https://data.kcg.gov.tw/))
## Todo List
#### 取值
* getAttribute 取屬性
```javascript=
DOM.getAttribute('class')
```
* nodename 取標籤名稱
```javascript=
DOM.nodename
```
### 流程
1. 資料結構
2. 初始畫面渲染
3. 設定好各個事件觸發
4. 開始寫 CRUD
Sign in with Wallet
Connect another wallet