左手's Blog

锋利web前端为一个系列文章，分享利用python、vimscript等语言，整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴 查看当前系列的所有文章

本篇讲解sass中的通过变量来控制图片版本号和路径。

版本号应用场景：背景图片更新过后，浏览器缓存了之前的背景图片，用户需要强制刷新浏览器才能看到最新更新。有时候这种情形是无法接受的，通过给背景图片添加一个get参数，使浏览器重新请求图片。修改$CVS变量，重新生成css文件就可以了。

绝对路径应用场景：ie6下面的AlphaImageLoader无法使用相对路径，手动编码在开发环境迁移到产品环境时可能因为路径改变而需要手动修改多处。sass中指定一个绝对路径的变量即可，在需要时修改变量，重新生成css文件就可以轻松维护。有些项目要求全部使用绝对路径，但开发的时候硬盘本地文件都是使用相对路径引用的。在上线前将变量修改为绝对路径，迁移到线上环境。

sass代码

$CVS: '2711'
$IMGURL: '../img'
$FULLIMGURL: '/public/img'

.test
  width: 120px
  height: 40px
  background: url(#{$IMGURL}/button.png?t=#{$CVS}) 0 0 no-repeat
  .ie6 &
    background-image: none
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{$FULLIMGURL}/img/button.png?t=#{$CVS}")

css代码

.test { width: 120px; height: 40px; background: url(../img/button.png?t=2711) 0 0 no-repeat; }
.ie6 .test { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/public/img/img/button.png?t=2711"); }