Sass 編譯方式 | 六角學院

自動播放
自動完成

上一堂課程完成並繼續課程

1449093

大專院校前端體驗營 2021 夏季

css background 背景圖案設計

background 在 html 元素上載入背景圖片，設定寬高 (6:59)
background-repeat：將圖片重複顯示，repeat-x (13:42)
background-color：與背景圖片的混用 (9:24)
background-position：移動 background 的位置 (4:28)
background 縮寫教學 (2:37)

RWD 手機版網頁設計

RWD - 伸縮自如的RWD 排版術(上) (46:32)
RWD - 伸縮自如的RWD 排版術(下) (79:59)

Sass 環境教學 - 一起掌握最世界最多人用的 CSS 管理語言！

何謂 Sass？ (3:28)
Sass 與 CSS 的不同之處 (7:11)
SCSS 與 Sass 格式差異 (3:32)
SCSS 格式教學 (7:15)
Sass 格式教學 (7:14)
Sass 編譯方式 (5:22)
VS CODE 編譯 Sass 教學 (5:58)
prepros 教學 (5:22)
& 連結詞教學 (2:57)

Sass 變數 - 常用語法一鍵設定

為什麼要學變數？ (3:53)
變數教學 (5:20)
常見變數編譯錯誤 - 讓你不害怕各種錯誤訊息 (3:52)
變數搭配加減乘除好方便 (2:43)
字串管理，將常見字串統一整合的小技巧 (2:22)
調出想要的顏色，藉由 darken、lighten 顏色功能就能輕鬆達到 (2:57)
從基礎到進階的變數管理技巧 (7:08)

Sass import - 切分檔案好工具，維護管理更方便

import - 要將 Sass 學得淋漓盡致，你不能不會 import (3:19)
import + 變數雙向管理 (3:52)
主要 CSS 拆開管理 (3:17)
常見問題解析 (3:08)
CSS Reset - 你知道 meyerweb 與 Normalize 的差異嗎？ (5:58)
整合 Reset 流程 (4:46)
import 總結 (3:24)

Sass Mixin - 讓你不會回想原理，而中斷思緒

為什麼你一定要學 Mixin？ (3:13)
Mixin 輕鬆寫 (4:23)
掌握 Mixin 的各種好處，你不能不知道！ (5:37)
Mixin + import 組合技 (3:05)
搭配參數，讓 Mixin 更加靈活！ (5:07)

熟悉 Mixin 後，搭配 RWD 宛如天衣無縫

掌握 Mixin 後，寫 RWD 再也不是痛苦事 (5:51)
核心語法 @Mixin + content (6:41)
Sass 響應式網頁心得總結 (4:47)

Sass/CSS 設計模式 - 教您最實用的網頁收納術！

OOCSS - 讓結構更加乾淨 (5:18)
OOCSS - 容器與內容分離 (5:13)
OOCSS - 容器與內容分離 - 以格線系統設計為例 (5:51)
OOCSS - 樣式與結構分離 (6:44)

Bootstrap5

Bootstrap 5 影片內容

1px 也不差的網頁排版術

1px 也不差的網頁排版術 (109:51)

第二週 - RWD 響應式網頁設計

第二週 - RWD 響應式網頁設計 (87:44)

第三週 - BS5 格線系統

第三週 - BS5 格線系統 (118:27)

第四週 - BS5 SCSS 管理

第四週 - BS5 SCSS 管理 (99:22)

額外提供：動畫設計

動畫設計 - 上半部 (49:39)
動畫設計 - 下半部

第五週 - 大學生未來方向建議

第五週 - 大學生未來方向建議 (127:18)

Sass 編譯方式

/courses/1449093/lectures/33239346/hotmart_lecture_video_download_link/59472268

1449093

Sass 官方網站：https://sass-lang.com/install

完成並繼續課程