左手's Blog

锋利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文件，就可以跳过用户浏览器的缓存，让修改即立刻呈现在用户面前。