关于环境的一点:我们使用Grunt进行UI构建自动化,我们使用Twitter Bower来管理第三方依赖项,因为我们不想让第三方代码保存在我们的存储库中,所以我们对于CSS扩展使用Compass。使用指南针内联自举SASS图像
当前制作供应商资产的压缩版本为单个CSS文件并遇到问题,Compass在构建时不会将图像转换为内联图像。我们希望将所有图像内联到带有数据URL的结果CSS文件中(只要我们支持比IE9 =更新的浏览器)。
包括 Bootstrap SASS主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。其实,一件好事,因为我们会消除对红宝石/罗盘依赖性,我们希望能够与故宫安装所有
我们不会更改Bootstrap SASS代码。 – 2013-03-04 21:10:39
好的。让它咕噜它) – 2013-03-05 07:59:48