使用指南針內聯自舉SASS圖像

關於環境的一點：我們使用Grunt進行UI構建自動化，我們使用Twitter Bower來管理第三方依賴項，因爲我們不想讓第三方代碼保存在我們的存儲庫中，所以我們對於CSS擴展使用Compass。使用指南針內聯自舉SASS圖像

當前製作供應商資產的壓縮版本爲單個CSS文件並遇到問題，Compass在構建時不會將圖像轉換爲內聯圖像。我們希望將所有圖像內聯到帶有數據URL的結果CSS文件中（只要我們支持比IE9 =更新的瀏覽器）。

主SCSS文件看起來像

// styles/main.scss 
$iconSpritePath:  '../components/bootstrap-sass/img/glyphicons-halflings.png'; 
$iconWhiteSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings-white.png'; 
//.. 
@import "../components/bootstrap-sass/lib/bootstrap";

指南針命令看起來像

compass compile --css-dir target/compass/styles \ 
    --sass-dir app/styles --images-dir app/images --output-style expanded

結果輸出就像

// target/compass/styles/main.css 
/* line 18, ../../../app/components/bootstrap-sass/lib/_sprites.scss */ 
[class^="icon-"], 
[class*=" icon-"] { 
    display: inline-block; 
    ... 
    /* WANT THIS IMAGE INLINED */ 
    background-image: url("../components/bootstrap-sass/img/glyphicons-halflings.png"); 
    ... 
}

所以，主要的願望是讓所有url()表達式內聯保存base64編碼圖像。作爲替代方案，如果它更容易提供此功能，我們可以切換到LESS。其實，一件好事，因爲我們會消除對紅寶石/羅盤依賴性，我們希望能夠與故宮安裝所有

來源

2013-03-04 nefo_x