SCSS 格式教學

670032

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

六角學院線上資源

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 變數 - 常用語法一鍵設定

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 宛如天衣無縫

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)

中進階觀念

最終作業

錯誤的 CSS 設計方式

自製格線系統

格線系統的觀念演進 (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/11949498/hotmart_lecture_video_download_link/24164905

670032