左手'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"); }

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

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

本篇讲解sass中的extend和include的运用

经常能看到某些网站的css中，将多个引用到同一个背景图片的样式定义在一处。例如淘宝的这段。

.search-panel button,
.search-panel-fields s,
.search-fix,
.help-guest a,
.product-list,
.tmall-interlayer-title,
.tmall-slide-left,
a.tmall-slide-left:hover,
.tmall-slide-right,
a.tmall-slide-right:hover,
.guang-topics ol,
p.hotsale-free-sent {
   background:url(http://img03.taobaocdn.com/tps/i3/T1ZeuRXaFtXXXXXXXX-300-429.png) no-repeat;
}

以传统的css开发方式，我们需要手动将引用这个背景图片的样式名整理在一起。下面看一种以sass实现的方式：

.Cbg_btn1
  background-image: url(../img/bg_btn1.png)
  _background-image: url(../img/bg_btn1.8bit.png)

@mixin bg_btn1($top: 0, $left: 0, $rep: no-repeat)
  @extend .Cbg_btn1
  background-position: $left $top
  background-repeat: $rep

.btn1
  +bg_btn1(-50px)
.btn2
  +bg_btn1(-100px)
.btn3
  +bg_btn1(-100px)

.Cbg_btn1, .btn1, .btn2, .btn3 { background-image: url(../img/bg_btn1.png); _background-image: url(../img/bg_btn1.8bit.png); }

.btn1 { background-position: 0 -50px; background-repeat: no-repeat; }

.btn2 { background-position: 0 -100px; background-repeat: no-repeat; }

.btn3 { background-position: 0 -100px; background-repeat: no-repeat; }

如果换成以sass代码的方式实现，再转换成css代码，就可以非常方便的在当前样式中引用这个背景图片。上例中还通过定义变量设定背景图片的版本号，在下次背景图片进行修改后，只需要更新变量重新生成css文件，就可以跳过用户浏览器的缓存，让修改即立刻呈现在用户面前。