付款。(在家觀看 = 0%，在校觀看 = 100%)
100% 在校觀看日期及時間：
自由選擇，點選以下地區觀看辦公時間及位置
課時： 6 小時
享用時期： 報讀日至 3 星期內，進度由您控制，可快可慢。
課堂錄影導師：Franco
在校免費試睇：首半小時，請致電以上地點與本中心職員預約。
本課程提供在校免費重睇及導師解答服務。
(在家觀看 = 100%，在校觀看 = 0%)
100% 在家觀看日期及時間：
每天 24 小時全天候不限次數地觀看
課時： 6 小時
享用時期： 報讀日至 3 星期內，進度由您控制，可快可慢。
課堂錄影導師：Franco
在校免費試睇：首半小時，請致電以上地點與本中心職員預約。
本課程提供導師解答服務。
令你 DRY (Don't repeat yourself) 爆的課程！
大家有沒有見過以下很濕 (Wet [Write Everything Twice / We Enjoy Typing / Waste Everyone's Time])，有大量重覆 styles的 CSS?
可能大家可以寫得如下圖般 “無咁濕”。但同一個 class 的 styles 分散地在不同的地方設定，如果 CSS 個 file很大，要追某個 class 的 styles 會容易嗎？
如果你懂得 CSS Preprocessors，你可以如下圖般寫 CSS，沒有重覆的 styles，沒有分散的 classes。相比之下，由於這個 CSS 十分 dry (don't repeat yourself)，相對容易觀看及管理，加減改追 codes 都相對容易，Bugs 亦相對較少。(在 wet [Write Everything Twice] 的環境裏較容易產生 bugs)
再同大家分享多一個例子，如果沒有使用 CSS Preprocessors，儘管看見結構相似的 CSS，但亦不容易簡化，如下圖所示。
如果使用 CSS Preprocessors，就可以使用 dry (don't repeat yourself) 原則編寫 CSS，如下圖所示。
CSS Preprocessors 是一系列的技術能讓我們以 dry (don't repeat yourself) 原則編寫及管理 CSS。由於我們不能直接地未編譯下使用 CSS Preprocessors，要享受 CSS Preprocessors 所帶來的便利就需要有系統地由安裝、編譯、語法、將語法應用到實際例子的流程學習它。《Sass, Less 與 Compass CSS 精簡結構課程》 是一個 6 小時的課程，課程內會教授現有常用的 CSS Preprocessors (Sass, Less 和 Compass)，當中覆蓋它們的安裝、編譯、語法到應用語法等。這課程令你不用到四處摸索就能學會 CSS Preprocessors。請 按此 參閱課程內容。
| 課程名稱： |
Sass, Less 與 Compass CSS 精簡結構課程 (CSS Preprocessors) - 簡稱：Sass Training Course |
| 課程時數： | 合共 6 小時 |
| 適合人士： | 對 CSS 有基本認識 |
| 授課語言： | 以廣東話為主，輔以英語 |
| 課程筆記： | 本中心導師親自編寫中文為主筆記，而部份中文字附有英文對照。 |
| 免費重讀： | 傳統課堂學員可於課程結束後三個月內免費重看課堂錄影。 |
課程名稱：Sass, Less 與 Compass CSS 精簡結構課程 (CSS Preprocessors)
- 簡稱：Sass Training Course
第一部份：Sass
Sass (Syntactically Awesome Stylesheets) 是一個相當流行的 CSS Preprocessor。
- 安裝 Ruby
- 安裝 Sass
- Sass 命令行界面
- 將 Sass 結合到 IDE (Integrated Development Environment, 集成開發環境)
- 註釋
- 變數
- 巢狀 CSS
- Partials 與 Imports
- Inheritance 與 Extends
- Mixin 與 Include
- 引用 parent class
- 在 CSS 內進行加減乘除等運算
- Media query
- 顏色處理
- 預設值
- Interpolation
- 流程管理
- if / else
- for loop
- each
- while
- Functions
- Custom functions
- Common numeric functions
- Common color functions
第二部份：Less
跟 Sass 相似，Less 是另一個同樣是相當流行的 CSS Preprocessor。
- 安裝 Less
- Less 命令行界面
- 將 Less 結合到 IDE (Integrated Development Environment, 集成開發環境)
- 註釋
- 變數
- Interpolation
- 巢狀 CSS
- Imports
- Mixin
- Mixin guards
- Mixin arguments
- 引用 parent class
- Merging
- 在 CSS 內進行加減乘除等運算
- List 與 Loop
- Functions
- 12-column grid system
第三部份：Compass
Compass 是以 Sass 為基礎的 CSS authoring Framework.
- 安裝 Compass
- 設定環境變數 (environmental variables)
- 使用指令建立 Compass 專案
- 了解 config.rb
- 在 Compass 內使用 reset
- 在 Compass 內使用 CSS3
- 在 Compass 內設定 Typography
- 製作 sprite sheet
- 不能 compile 時可以如何處理
1 CSS Preprocessors
1.1 Wet 和 Dry
1.1.1 Wet
1.1.1.1 Wet：例子1
1.1.1.2 Wet：例子2
1.1.1.3 Wet：例子3
1.1.2 Dry
1.1.2.1 Dry：例子1
1.1.2.2 Dry：例子2
2 開發環境 (Integrated Development Environment)
2.1 下載開發環境 (Integrated Development Environment) 軟件
2.2 安裝開發環境 (Integrated Development Environment) 軟件
3 Sass (Syntactically Awesome Stylesheets)
3.1 安裝、介面與 IDE 融合
3.1.1 安裝 Sass
3.1.2 Sass 指令介面 (Command Line Interface)
3.1.3 與 IDE 融合及建立具有 Sass 的 Project
3.2 Comments
3.2.1 實習：Comments
3.3 Variables
3.3.1 實習：Variables
3.4 Nesting
3.4.1 實習：Nesting
3.5 partials and @import
3.5.1 實習：partials and @import
3.6 @extend
3.6.1 實習：@extend
3.7 @include 與 @mixin
3.7.1 實習：@include 與 @mixin
3.8 Operators
3.8.1 實習：Operators
3.9 Parent selectors
3.9.1 實習：Parent selectors
3.10 顏色處理
3.10.1 實習：顏色處理
3.11 @media
3.11.1 實習：@media
3.12 default
3.12.1 有 default 與無 default 的分別
3.12.1.1 無 default 的情況
3.12.1.2 有 default 的情況
3.12.2 實習：default
3.13 @if @else
3.13.1 實習：@if @else
3.14 Interpolation with @for
3.14.1 實習：Interpolation with @for
3.15 Interpolation with @each
3.15.1 實習：Interpolation with @each
3.16 Interpolation with @each (更有趣的例子)
3.16.1 實習：Interpolation with @each (更有趣的例子)
3.17 Interpolation with while
3.17.1 實習：Interpolation with while
3.18 Default arguments 和 variable arguments
3.18.1 實習：Default arguments 和 variable arguments
3.19 Interpolation with function
3.19.1 實習：Interpolation with function
3.20 Interpolation with numeric functions
3.20.1 實習：Interpolation with numeric functions
3.21 手動轉換
3.21.1 實習：手動轉換
4 Less
4.1 安裝、介面與 IDE 融合
4.1.1 安裝 Less
4.1.2 Less 指令介面 (Command Line Interface)
4.1.3 與 IDE 融合及建立具有 Less的 Project
4.2 Comments
4.3 Variables 及 interpolation
4.3.1 實習：Variables 及 interpolation
4.4 Mixins, @argument and …
4.4.1 實習：Mixins, @argument and …
4.5 Nesting
4.5.1 實習：Nesting
4.6 @import
4.6.1 實習：@import (第一部份)
4.6.2 實習：@import (第二部份)
4.7 Mixin Guards / Conditional Mixin
4.7.1 實習：Mixin Guards / Conditional Mixin
4.8 Parent selectors + Mixin guard
4.8.1 實習：Parent selectors + Mixin guard
4.9 算術運算及顏色運算
4.9.1 實習：算術運算及顏色運算
4.10 Property merge
4.10.1 實習：Property merge
4.11 重覆執行的 mixins / grid systems
4.11.1 實習：重覆執行的 mixins / grid systems
5 Compass
5.1 安裝 Compass 及在 IDE 內使用 Compass
5.1.1 安裝 Compass
5.1.2 在 IDE 內使用 Compass
5.2 Reset
5.2.1 實習：Reset
5.3 CSS3
5.3.1 實習：CSS3 (例子 1)
5.3.2 實習：CSS3 (例子 2)
5.4 Typography
5.4.1 實習：Typography (例子 1)
5.4.2 實習：Typography (例子 2)
5.4.3 實習：Typography (例子 3)
5.5 Sprite (精靈)
5.5.1 實習：Sprite (精靈)