格線系統的觀念演進 | 六角學院

自動播放
自動完成

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

670032

Sass 實戰全攻略 - 成為前 1% 的 CSS 頂尖好手

六角學院線上資源

六角學院線上社團
Apple M1 觀看公告

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

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

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)
import 小試身手

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 + RWD 小試身手

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

Sass/CSS 模組化簡介 - 打破你對設計模式的無限想像 (7:16)
Smacss - 最好入門的設計模式介紹 (2:20)
Smacss - 教您用 Base 打好地基 (上) (4:44)
Smacss - 教您用 Base 打好地基 (中) (4:24)
Smacss - 教您用 Base 打好地基 (下) (4:55)
Smacss - Layout 佈局管理 (上) (3:36)
Smacss - Layout 佈局管理 (下) (8:05)
為何 CSS/Sass 需要模組化？ (3:48)
Smacss - 模組化核心語法 (8:49)
Smacss - 元件觀念講解 (3:15)
Smacss - 載入按鈕模組流程 (3:51)
Smacss - HTML 標籤優化 (3:20)
OOCSS - 讓結構更加乾淨 (5:18)
OOCSS - 容器與內容分離 (5:13)
OOCSS - 容器與內容分離 - 以格線系統設計為例 (5:51)
OOCSS - 樣式與結構分離 (6:44)
設計模式小試身手 (2:39)

教你寫出一手好命名

命名寫得好，維護沒煩惱 (4:37)
究竟要用 - 還是 _ 來命名？ (4:44)
拋棄語意命名，你能看見更寬廣的天空 (6:18)
BEM - 初試啼聲 (6:29)
BEM - 你會如何改寫 BS4 的命名？ (7:00)
BEM - 搭配 Sass 組合技 (2:58)
總結 - 寫出讓人驚嘆的語意命名 (6:22)
命名設計小試身手 (0:41)

中進階觀念

開發網站前，你 guidelines 規劃好了嗎？ (5:22)
用 7+1 Sass 設計模式，架構再大也不怕！ (10:05)
依照背景不同，所開發出來的介面思維也會各有特點 (9:08)

最終作業

最終作業詳解 (10:08)

錯誤的 CSS 設計方式

CSS 範圍性常見錯誤 (3:15)
請勿將高度寫死 (4:12)
請勿使用 ID 綁定網頁樣式 (4:21)
解決 JS 與 CSS 功能相互干擾 (2:25)

自製格線系統

格線系統的觀念演進 (7:37)
經典 Bootstrap 的格線系統的運作原理 (3:07)
補充介紹：Sass @for，使用迴圈增加樣式 (4:01)
補充介紹：Sass @each 及 map (4:41)
使用純 CSS 撰寫格線系統 (8:58)
SCSS 模組化格線系統 (7:47)
大型框架的格線系統運作邏輯 (5:48)
作業說明 (2:56)

格線系統的觀念演進

/courses/670032/lectures/11949748/hotmart_lecture_video_download_link/24220438

670032

Bootstrap 中文版文件

完成並繼續課程