锋利web前端为一个系列文章，分享利用python、vimscript等语言，整合haml、sass、coffee等实现快速前端开发，可以到 {% post_link 2012/websharp_index (锋利web前端开发)索引贴 %} 查看本系列的所有文章。
本篇讲解sass中的extend和include的运用

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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实现的方式：
sass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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)

css

1
2
3
4
5
6
7
.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文件，就可以刷新浏览器缓存，将修改即立刻呈现给用户。