[锋利web前端开发]sass小技巧extend和include组合运用

左手 posted @ 2013年5月22日 20:24 in 前端开发 with tags include sass extend sass技巧 , 1286 阅读

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


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter