---
# System prepended metadata

title: 六角試上紀錄

---

# 六角試上紀錄

## 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次以上的情況時就可以考慮使用
![](https://i.imgur.com/YJ5lDcs.png)


### 運算

可以直接在樣式中做運算，不用加 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))

![](https://i.imgur.com/gQjfjZB.png)

#### 字串相加

使用 + 號連結字串，空白可使用 ' ' 做為中間連結
```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