聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

九月 13, 2012

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» CSS layout 好幫手 Compass scss version of normalize.css

我相信網頁程式設計師都知道，網站一開始必須先使用 CSS Rest 將所有的 browser layout 初始化，這樣可以讓以後 CSS debug 速度增加，也解決了很多跨瀏覽器的問題，昨天使用 Compass-h5bp 來自動產生 html5 template，但是發現版本並非是 html5 boilerplate 所提供的 V4.0.0 版本，專案裡面的 Normalize.css 也是舊版的，雖然有其他開發者提交 pull request，但是作者似乎還沒 merge 到主分支，只是我好奇這個 tool 除了幫忙產生 html5 boilerplate，另外多了 Compass 檔案，讓寫 Compass 前端工程師更加方便，由於 Normalize.css 還沒更新，所以我 fork 了 normalize.css 專案，並且將 v2.0.1(IE 8+, Firefox 4+, Safari 5+, Opera, Chrome) 跟 v1.0.1 (Includes legacy browser support) 整合在同一支 scss 檔案，歡迎大家取用。

如果要支援 IE6/7 的話，請將 $legacy_browser_support 設定為 true 即可。檔案可以由底下專案取得

SCSS version of normalize.css

Related View

by appleboy at 1:53 AM under compass , compass css framework , css , normalize.css (Comments)
十一月 11, 2011

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» Sass language 和 Compass 教學投影片

Compass Home Compass Documentation

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

Related View

by appleboy at 3:53 AM under compass , compass css framework , css , sass (Comments)
十月 13, 2011

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 在 CentOS 上面安裝 Ruby 環境

centos

目前開發網站都傾向於用 Compass 這套 CSS Framework 來 develop，開發之前必須把環境先弄好，就是要有 Ruby 套件才可以安裝 Compass，網路上的教學幾乎都在是 Ubuntu 底下用 apt-get 方式來安裝，其實相當方便，但是 Fedora 或 CentOS 就是要用 yum 方式來安裝，這次碰到 CentOS 竟然 yum search git 出來的結果是空的，所以決定全部都透過 tar 的方式來安裝全部套件了。由於 Fedora 幾乎都可以找到套件，但是碰到 rubygems 需要用到 ruby 1.8.7 以上版本，所以還是乖乖的用 tar 方式吧。

大家可以試試看透過底下 yum 方式安裝:

yum install -y ruby ruby-devel rubygems

雖然 Fedora 透過上面可以安裝成功，可是 ruby 跟 rubygems 的版本根本是…太舊了吧 …

安裝 git

yum 方式:

yum install git

利用 tar 方式，先到 git download 專區 找到 1.7.7 版本

$ yum install curl-devel
$ wget http://git-core.googlecode.com/files/git-1.7.7.tar.gz
$ tar -zxvf git-1.7.7.tar.gz && cd git-1.7.7
$ ./configure
$ make && make install

安裝 Ruby

透過 yum 安裝好的 Ruby 版本太舊，乾脆直接衝最新版

$ wget ftp://ftp.ruby-lang.org//pub/ruby/1.9/ruby-1.9.2-p0.tar.gz
$ tar -zxvf ruby-1.9.2-p0.tar.gz
$ cd ruby-1.9.2-p0
$ ./configure
$ make && make install

安裝好打入 ruby -v 你會發現還是舊的版本，那是因為新版裝在 /usr/local/bin 底下，而 yum 方式安裝的會在 /usr/bin 底下，所以改變一下 $PATH 變數順序即可

$ export PATH=/usr/local/bin:$PATH
$ ruby -v
ruby 1.9.2p0 (2010-08-18 revision 29036) [x86_64-linux]

安裝 RubyGems

一樣到 RubyGems 下載最新版本

$ wget http://production.cf.rubygems.org/rubygems/rubygems-1.8.10.tgz
$ unzip rubygems-1.8.10.tgz
$ tar -zxvf rubygems-1.8.10.tgz
$ cd rubygems-1.8.10
$ ruby setup.rb

接著可以透過 gem 來安裝 Compass。Windows 請參考之前寫的 在 Windows 底下安裝 Compass CSS Authoring Framework

參考文章:
在CentOS 5上安裝Git

Related View

by appleboy at 8:20 AM under centos , compass , compass css framework , css , fedora , git , linux , ruby , rubygems , 版本控制 (Comments)
十月 5, 2011

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» 在 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

在 Windows 底下安裝 Ruby

其實在 Ruby 下載官網有製作好懶人包了，我們只要下載 RubyInstaller 網站別人包好的執行檔即可。首先到 RubyInstaller Download Page 選擇 Ruby 1.9.2-p290，下載之後直接執行，然後很簡單直接下一步按到最後，整個 Ruby 環境就建立好了。

透過 Ruby gem 安裝 Compass

安裝好上述執行檔，你會發現在 C 槽多了 C:\Ruby192，接著我們按開始->執行->打入 cmd->Enter，會跳出一個命令列視窗，接著我們利用底下步驟來安裝 compass:

# 切換到 ruby 執行目錄
cd c:\\ruby192\bin
# 先更新 gem (類似 apt-get update)
gem update --system
# 安裝 compass 套件
gem install compass

這樣直接在原來目錄下底下指令: compass -h 就可以看到底下畫面，這樣 Windows 底下大致完成了

compass_windows

大家一定會覺得每次都要切換到 C:\Ruby192 才可以執行 compass，大家可以把 C:\Ruby192 加入到個人 PATH 裡面，只要到環境變數里面設定即可，請參考下圖

compass_windows2

Related View

by appleboy at 4:10 AM under compass , compass css framework , css , framework , sass (Comments)
A Feedjack powered Planet
• A Django site. •
• •