加入 Systematic Facebook 擁躉群  

這個頁面上的內容需要較新版本的 Adobe Flash Player。

取得 Adobe Flash Player


想定期知道最新課程及優惠嗎?
免費訂閱本中心的課程通訊!
觀看課程通訊
Reasonable Spread:
Permission email marketing

課堂錄影隨時睇 10 大優點之免費試讀:無條件免費試讀,讓您毋須擔心錄影課程及導師質素,信心保證!

Sass, Less 與 Compass CSS 精簡結構課程 (CSS Preprocessors)

  • 課程時間
  • 課程簡介
  • 課程內容
  • 詳細內容

推介服務:課堂錄影隨時睇
編號 地點 可預約星期及時間 學費低至 85 折  
1U1712MV 旺角 一至五:11:30 - 22:30   六及日:10:30 - 21:30   (公眾假期休息) 95 折後只需 $741 按此報名
1U1712OV 觀塘 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 9 折後只需 $702 按此報名
1U1712PV 北角 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 9 折後只需 $702 按此報名
1U1712SV 沙田 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 85 折後只需 $663 按此報名
1U1712YV 屯門 一至五:13:30 - 22:00   六及日:12:30 - 21:00   (星期三及公眾假期休息) 85 折後只需 $663 按此報名
* 各政府部門可使用 P Card 付款  
免費試睇: 首半小時,請致電與本中心職員預約。 查看各地點電話
旺角 2332-6544
觀塘 3563-8425
北角 3580-1893
沙田 2151-9360
屯門 3523-1560
免費重睇: 學員可於享用時期內於報讀地點不限次數地重看課堂錄影,從而可反覆重溫整個課程!
導師解答: 學員可於觀看某一課堂錄影後提出課堂直接相關的問題,課程導師會樂意為學員以單對單的形式解答!
課時: 6 小時
享用時期: 報讀日至 2 星期內,進度由您控制,可快可慢。
課堂錄影導師: 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。請 按此 參閱課程內容。


課程時數: 合共 6 小時
適合人士: 對 CSS 有基本認識
授課語言: 以廣東話為主,輔以英語
課程筆記: 本中心導師親自編寫中文為主筆記,而部份中文字附有英文對照。
免費重讀: 傳統課堂學員可於課程結束後三個月內免費重看課堂錄影。


第一部份: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 (精靈)

 

更多綜合課程
  法律課程
  • 代理人的法律責任
  • 公司董事和合夥人的法律責任
  • 婚姻的法律責任
  • 遺產繼承的合法權益
  英文課程
  • IPA 拼音:級別 1 2 3 4
  普通話課程
  • 基礎普通話拼音 (免費)
  • 進階普通話拼音
  • 普通話會話:級別 1 2 3
  西班牙語文課程
  • 級別 1 2 3
  中醫課程
  • 濕疹與皮膚敏感病
  • 暗瘡與色斑 | 鼻敏感與感冒
  • 脫髮與白髮 | 從五官看健康
  攝影課程
  • 攝影初級
  • 攝影中級 (風景專題)
  風水命理課程
  • 紫微斗數:級別 1 2 3
  • 子平八字:級別 1 2 3
  • 八字風水:級別 1 2 3
  • 奇門遁甲:級別 1 2 3

這個頁面上的內容需要較新版本的 Adobe Flash Player。

取得 Adobe Flash Player