SASS/Compass 圖片好用的mixin

自動抓取圖片寬高的mixin

http://compass-style.org/reference/compass/helpers/image-dimensions/
會傳回px的mixin
image-width('../images/bg.png')
image-height('../images/bg.png')

@import compass
.bg
    width: image-width("../images/bg.png")
    height: image-height("../images/bg.png")
    background: url("../images/bg.png")  

因為常常用到背景圖，需要設定div寬高
可以自己包一個mixin

@import compass
@mixin bgimage($image)
    width: image-width("../images/#{$image}")
    height: image-height("../images/#{$image}")
    background: url("../images/#{$image}") no-repeat

.index__bg
    +bgimage("index-bg.png")
.game__bg
    +bgimage("game-bg.png")

另外，SASS還有一個不錯的應用
一般製作手機版網頁，為了retina都會把圖縮一半來製作
也可以包一個mixin

@mixin image-2x($image)
    background-image: url("../images/#{$image}")
    background-size: image-width("../images/#{$image}")/2 image-height("../images/#{$image}")/2
.index__bg
    +image-2x("index-bg.png")

*SASS可以計算數值，所以可以直接寫 / 2，很棒吧！

*參考：
http://signalvnoise.com/posts/3271-easy-retina-ready-images-using-scss


*這邊有許多mixins可以用
http://iamsteve.me/blog/entry/compass_mixins_you_should_know_about
真的很不錯，還有 replace-text-with-dimensions
裡面連圖片快取都幫你想到了耶！

CSS SPRITE支援

CSS Sprite
最主要的優點：減少網頁的request，提升頁面效能，減少圖片的檔案大小
缺點就是在開發&維護的時候有點兒麻煩，所以通常還是看狀況需求使用~
但是compass提供很方便的圖片合併功能，減少CSS Sprite開發上的缺點！

首先，先把要合併的png圖檔放在同一個資料夾
EX: /images/icon/
這邊要注意的是~compass只支援png的合併喔~

@import "icon/*.png"  
@include all-icon-sprites 

compile後就會看到，images裡面出現一張 icon-s789d140c0e.png 的圖
icon是資料夾名稱， - 後面是亂數
當圖檔有變動時，compass貼心的自動重新產生亂數，避免快取問題~

再看，生成的css

.icon-sprite, .icon-fb, .icon-plurk, .icon-gogole {
  background: url('../images/icon-s6e7c8935e4.png') no-repeat;
}

.icon-fb {
  background-position: 0 0;
}

.icon-plurk {
  background-position: 0 -32px;
}

.icon-gogole {
  background-position: 0 -64px;
}

沒錯，class的名稱他會依照圖片名稱來依序命名
也就是 .[資料夾名稱]-[圖片名稱]
而且連background-position都幫你設定好~

主要有遇到一個url路徑問題
沒特別設定的話，他會 url('images/icon-s6e7c8935e4.png')
這時候要到config.rb，加一行relative_assets = true (原本其實有，被註解起來)
他就會變成相對路徑 url('../images/icon-s6e7c8935e4.png')


另外，真的好貼心
他還有一些設定值，比如說spaceing、layout(vertical/horizontal/diagonal/smart)...等

例如spaceing設定
你可以設定$icon-spacing: 1px
主要的屬性是 $
然後，記得設定值要寫在匯入的前面

$icon-layout: horizontal
$icon-spacing: 1px
$icon-sprite-dimensions: true
@import "icon/*.png"  
@include all-icon-sprites 

官方文件參考：
http://compass-style.org/help/tutorials/spriting/customization-options/
http://compass-style.org/help/tutorials/spriting/magic-selectors/
http://compass-style.org/help/tutorials/spriting/sprite-layouts/

*其中的Magic Selectors，可以用在button滑入的效果上喔~