---
# System prepended metadata

title: 第一次
tags: ['2022', 課程]

---

# 第一次
###### tags: `課程` `2022`

::: info
### 今天要幹嘛
- [x] 繼續爆吃麥當勞...勞贖
- [x] 檢查作業！
- [x] 給一點新東西
- [x] 混的更熟一點
- [x] ~~繼續出作業，爽啦~~
- [x] 討論下次吃甚麼 & 時間
:::


## Content
* [Tailwindcss](##Tailwindcss)
* [Bootstrap](##Bootstrap)
* [Sass](##Sass)
## 大意
- Tailwind
    - css の utility framework(把一堆屬性變成class)
    - 高度客製化(不爽就自訂阿)
    - 一開始很難管理
- Bootstrap
    - UI Component(人家都做好ㄌ)
    - 簡單快速
    - 能調ㄉ比較少
## Tailwindcss
### So why?
- 方便快速
- 比較不會互相蓋來蓋去
- 不用 ~~!important~~ ㄌ
### How to use?
- CDN
```html
<head>
    <script   src="https://cdn.tailwindcss.com"> </script>
<head>
```

- CLI
#### Step 1
```bash=
# 安裝 Tailwind & 初始化
npm install -D tailwindcss 
npx tailwindcss init
```
#### Step 2
```js=
/* 用這行把tailwind.config.js 的 content 替換掉 */
content:["./src/**/*.{html,js}"],
```
#### Step 3
```css=
/* 把這三行放的你的Main CSS file */
@tailwind base;   
@tailwind components;   
@tailwind utilities;
```
#### Step 4
```bash=
# 把你編輯的CSS檔輸出到實際掛到html的CSS檔
npx tailwindcss -i /path/你的main CSS file.css -o /path/實際掛載到html的CSS file.css
```
#### Step 5
```html=
<!-- 享受Tailwind大法好 -->
<head>
    <link href="/dist/output.css" rel="stylesheet">
</head>
```
##### Ref
- [好用ㄉ小抄](https://nerdcave.com/tailwind-cheat-sheet)
- [鐵人賽好文](https://ithelp.ithome.com.tw/articles/10259679?sc=iThelpR)

## Bootstrap
css的framework，可以方便的使用bootstrap內建的排版、元件
支援rwd(就是手機版)，元件(像是button, alerts, modal)基本上比你手刻的好看

> [color=red] bootstrap v5不再依賴jquery，讚讚

### 怎麼引入?
```
// 如果你只要用css的話
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

// 還想用js?(沒有jquery，好耶)
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
```

### 排版
* breakpoints(斷點)
響應式設計(rwd)在不同尺寸、不同設備時產生不同的網頁排版變化
* container
容納、填充、對齊內容

### 元件(Component)
可以參考 [Bootstrap Doc](https://getbootstrap.com/docs/5.0/getting-started/introduction/) Component部份
也有六角學院翻譯的，但可能不是最新...


## Sass
Css的預處理器，讓css code變得更有結構、更整潔
不再需要分號、大括號，還可以縮排!

有遇過...
```= css
.a .b {
    // some css
}
.a .c {
    // some css
}
```
想變成...
```=
.a {
    .b {
        // some css
    }
    .c {
        // some css
    }
}
```
sass能做到!

### Sass的功能
1. 巢狀
```= css
table.hl
  margin: 2em 0
  td.ln
    text-align: right

// font-family, font-weight, font-size
li
  font: 
    family: serif
    weight: bold
    size: 1.3em
```
2. 變數
支援四種型態: 數值、字串、bool、顏色
用 **$** 當作變數名稱開頭
```= sass
$blue: #3bbfce                // 牽一髮而動全身
$margin: 16px
$font-family-base: '微軟正黑體'    // 字串變數

.content-navigation
  border-color: $blue
  color: darken($blue, 10%)    // sass內建函式，讓藍色變暗10%

.border
  padding: $margin/2           // 支援基本算術運算!
  margin:  $margin/2
  border-color: $blue
  
 body
   font-family: $font-family-base
```
3. Mixin
減少出現重複的code
```= css
@mixin table-base
  th
    text-align: center
    font-weight: bold
  td, th 
    padding: 2px

#data
  @include table-base
```
上面會被compile成css code:
```= css
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}
```

### 如何在express框架中導入sass
因為sass是css的預編譯器，所以最後還是要變成css，最後上線時仍需要將sass變成css
1. 把Sass加入dependency中
$ npm install node-sass-middleware
2. 加入sass middleware
```= js
// app.js

var sassMiddleware = require('node-sass-middleware');    // 放在var express下方

// 中間程式碼省略

app.use(express.static(path.join(__dirname, 'public')));

// 使用sass middleware
app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),    // .sass放在public資料夾
  dest: path.join(__dirname, 'public'),   // compile後css放在public資料夾
  outputStyle: 'compressed',
  indentedSyntax: true, // true = .sass and false = .scss
  debug: true,    // 開啟debug模式
}));

```