# 第一次 ###### 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模式 })); ```