簡單究好 Simple is Best

網頁前端開發資訊

SASS: 將css的編碼設定成utf-8 – 解決中文字元的問題

如果您在使用compass 監控 scss 的時候,出現底下的錯誤訊息
Error: Invalid CP950 character “\xxx”
那就表現檔案中出現ruby不認識的字元
這時候只要在config.rb,加上底下這一行設定、再重新compass watch就可以了
Encoding.default_external = 'utf-8'
加上這一行的結果會讓產生的css檔案最前面出現@charset “UTF-8”; 的設定

使用Compass自動生成CSS sprite、將小圖示合併成大圖

為了加快網頁載入的速度、減少使用者等待的時間,許多前端工程師會將網站需要用到的小圖示合併成一張大圖、再利用CSS來定位各個小圖示,這就是所謂的CSS sprite。CSS sprite可以減少HTTP的請求次數、加快網頁載入的速度。有許多工具都可以幫我們生成CSS sprite,這在篇文章中、我要介紹如何使用Compass自動生成 CSS sprite。

使用Compass製作CSS sprite非常輕鬆、。只要將圖示放在同一個資料夾內、再加上二行的語法,就完成合併圖片的動作囉! Read More

Sass 專案的基本設定

當我們建立Sass專案之後,在專案資料夾裡會產生一個config.rb檔案。這個檔案就是Sass專案的設定檔。在這個設定檔裡、我們除了指定一些資料夾的路徑(CSS, images, javascript…),還可以修改CSS輸出模式、開啟或關閉註解提示功能,以及將絕對路徑更改為相對路徑。
Read More

CSS開發工具(Sass + Compass)的環境安裝教學及基本操作

Sass是一套生成CSS的工具,支援變數、函數、繼承等功能,讓我們能更輕鬆地組織及維護CSS樣式表。
Compass則是一套簡化Sass編寫方式的工具,不僅可以自動補足CSS前綴詞,解決瀏灠器相容性的問題,還能將圖示合併成Sprite大圖,Compass mixins更是幫我們節省編寫的時間。

這篇文章包括了如何安裝Sass與Compass,還有如何建立、開啟以及監控Compass專案的方法。 Read More