而且去年 sharing 的時候是直接用 compass 實作一個 project … 所以也沒有文件和投影片留下來
現在又開始當假 F2E … 所以只好再把 compass 拿出來用
總之 compass 是一個 css 的 framework，然後主要是用 sass 寫 … sass 就不多說了 ( 之後有空再寫好了 … 哈哈哈好懶可以不要嗎 )
因為最近很常用到 Compass CSS sprite … 所以紀錄一下
1. 在 compass create 的 project 下建立一個資料夾 images ( 根據 config.rb )
2. 在 images 資料夾下在建一個資料夾，放想要 sprite 的圖片 ( images/icon/ )
3. 在 xxxx.scss 加入下列兩行
@import "icon/*.png";
@include all-"icon"-sprites;
4. xxx.scss 存檔後就會出現 sprite 的大圖還會把圖片的 background-position 算好可直接用 ( 在 xxx.css ) !
是不是很方便啊 ~ ( 灑花 )
另外也紀錄一下，CSS sprite 的起始位置是從圖片的左上開始算 ( 0, 0 )
往上 + 往右 + 往下 - 往左 -
ps. 今天工作竟然還要當 UED 自己切圖 … = .. = … 差點發瘋 … 雖然沒有 photoshop 但幸好有 pixlr.com … pixlr 根本就是個線上版 photoshop 啊 ! 超好用大推 !
沒有留言:
張貼留言