Ruby Compass and Sass Auto Testing Environment

Compass Home   Compass Documentation

Compass 是一套 CSS Authoring Framework,也是基於 Sass 語法的一套 Framework,先前寫了 GulpCompass Plugin,在針對自動化測試時候出現版本相依性不同,造成無法自動測試成功。自動化測試目前跟 Github 最常搭配的就是 Travis CI 或者是 Codeship,當然如果非 Open source 專案可能就要自己架設 CI 伺服器,個人推薦就是 Jenkins。這次遇到的問題其實跟 Ruby Gem 版本相依性有關,由於要測試 Compass 所有 Command 語法,所以使用了 Susy + sass + compass,如果在 .travis.yml 內直接寫

Continue reading “Ruby Compass and Sass Auto Testing Environment”

前端工程師必看: 十大 CSS 技巧

css3

2014 年第一篇文章來寫前端工程師必須要瞭解的 [CSS] 技巧,此篇其實來自於 KidsIL Blog 內的一篇 10 Great CSS Tips for every Web Developer,裡面作者紀錄了十大 CSS 技巧,看完這十大後,發現有些技巧曾經出現在 Even Wu 給網頁設計師的建議一文,這些技巧都算是蠻基本的,對於前端工程師有很大的幫助,如果尚未瞭解或還沒開始使用的開發者,也可以建議團隊開始使用。底下內容來自於原網站,在加上筆者的一些補充。

Continue reading “前端工程師必看: 十大 CSS 技巧”

Sass language 和 Compass 教學投影片

Compass Home   Compass Documentation
Speakerdeck 發現一篇不錯的 SassCompass 投影片教學 Sass & Compass: The future of stylesheets now.,此教學把 Sass Language 以及 Compass 基礎撰寫方式及進階用法都介紹完畢了,非常實用,推薦給剛入門的網頁設計師,這樣一來可以減少開發時間,二來可以解決討厭的跨瀏覽器問題。

在 Windows 底下安裝 Compass CSS Authoring Framework

Compass Home   Compass Documentation
Compass 是一套 base on Sass Language 的一套 CSS Framework,它提供了豐富的 CSS3 原件,讓您可以加速開發 CSS,也繼承 Sass Language 的開發方式,支援 variables, mixins, selector inheritance…等,今天就來介紹如何在 Windows 底下快速安裝開發環境。如果想更瞭解 Sass 可以參考之前的文章: 加速開發 CSS 工具: Sass

安裝步驟 (Install Compass)

在安裝 Compass 之前,您必須要先安裝 Ruby 開發環境,在 Ubuntu 或 Debian 底下可以透過 apt 的方式安裝:
$ sudo apt-get install ruby1.9.1-full
如果你想裝 ruby 1.8 可以透過底下:
$ sudo apt-get install ruby-full
Continue reading “在 Windows 底下安裝 Compass CSS Authoring Framework”

加速開發 CSS 工具: Sass

從來沒想過在開發 Web 網站過程,CSS Style 還可以程式化,設定變數來控制 CSS,今天來介紹一套用 command line 來轉換 CSS 的 Web Framework Plugin: SASS (Sassy CSS),可以參考 SASS 的 Change log 版本差異,目前最新版本 3.0 以後開始支援 CSS3 做開發,底下先來介紹如何安裝: 作者是在 Ubuntu 10.10 的環境下安裝,利用 apt 方式先將環境需要的軟體安裝好
# 安裝 Ruby 環境
 $ sudo apt-get install ruby
 $ sudo apt-get install rake
 $ sudo apt-get install rubygems
Ruby 的安裝只需要一行指令
gem install sass
另外也可以透過 git 方式來安裝
git clone git://github.com/nex3/sass.git
cd sass
rake install
安裝好就會 bin 目錄多出了 sass sass-convert scss 3個指令,如何轉換呢?也相當容易
mv style.css style.scss 
sass --watch style.scss:style.css
style.scss 是您寫的 SASS CSS 檔案 style.css 是您要輸出的檔案名稱 至於如何撰寫 Sass 語法,就請大家參考線上手冊,文件非常清楚,相信很容易看的懂