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

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

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

Avatar_small
Spice b2b 说:
2022年8月02日 15:34

Spice Money is a multidisciplinary digital and Banking Services, has been popularly in use by individuals. Spice Money login seen to promote banking services in rural areas with AePS, where the trending Apps don’t make their way. Having used this tool the individual can make their payments for different services such as Gas Bill, Electricity Bill, PAN card, and many others. Spice b2b The banking services happen through Aadhaar Card like settlement, balance inquiry, money withdrawal and more easily processed using Spice Money. Spice Money is a multidisciplinary digital and Banking Services, has been popularly in use by individuals. Spice Money login seen to promote banking services in rural areas with AePS, where the trending Apps don’t make their way.


登录 *


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