Sass Training Course Training 課程
Facebook: Sass Training Course Training 課程  
Sass Training Course Training 課程 Sass Training Course Training 課程
Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程 Sass Training Course Training 課程
Sass Training Course Training 課程 Sass Training Course Training 課程

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

取得 Adobe Flash Player


想定期知道最新課程及優惠嗎?
免費訂閱本中心的課程通訊!

【基礎普通話拼音課程】費用全免!

Sass, Less 與 Compass CSS 精簡結構課程 (CSS Preprocessors)
課程簡稱:Sass Training Course

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

課程優惠!現凡同時報讀以下兩個課程:
即減 $130!

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


地區 地址 電話 教育局註冊編號
旺角 九龍旺角亞皆老街 109 號,皆旺商業大廈 18 樓 2332-6544 533459
觀塘 九龍觀塘成業街 7 號寧晉中心 12 樓 G2 室 3563-8425 588571
北角 香港北角馬寶道 41-47 號華寶商業大廈 3 樓 01-02 號舖 3580-1893 591262
沙田 新界沙田石門安群街 3 號京瑞廣場 1 期 10 樓 M 室 2151-9360 604488
屯門 新界屯門屯喜路 2 號屯門柏麗廣場 17 樓 1708 室 3523-1560 592552
注意! 客戶必須查問報讀學校的教育局註冊編號,以確認該校為註冊學校,以免蒙受不必要的損失!


令你 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 (精靈)

 

更多綜合課程
  攝影課程
  • 攝影初級
  • 攝影中級 (景深專題)
  • 攝影中級 (風景專題)
  法律課程
  • 代理人的法律責任
  • 公司董事和合夥人的法律責任
  • 婚姻的法律責任
  • 遺產繼承的合法權益
  英文課程
  • 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