使用compass库编辑css

http://compass-style.org/help/documentation/

在这里我就不仔细讲compass的知识了,可以去阮一峰的博客里面有一遍compass的介绍,附上链接地址

http://www.ruanyifeng.com/blog/2012/11/compass.html

这里主要讲的是图片精灵,我们在网上可以找到很多关于compass使用图片精灵的方法,比较可惜的是不太满足我们的需求,所以做了如下改变

编译之前的sass代码:

  1. @charset "utf-8";
  2. @import "compass/utilities/sprites";
  3. @import "compass/css3/background-size";
  4.  
  5. // 公用图片精灵的配置信息
  6. $sprites_common: sprite-map("common/*.png", $spacing: 10px, $layout: vertical,$sort-by: '!width',$position:10px,$repeat:no-repeat,$clean-up:true);
  7.  
  8. @mixin img-sprite($sprite, $name, $sprite-name) {
  9.     //获取当前图标的图片名字
  10.     $imgurl: sprite-file($sprite, $name);
  11.     //获取当前图标的位置
  12.     $pos: sprite-position($sprite, $name);
  13.  
  14.     //根据名字获取获取长度和宽度,并设置
  15.     width: image-width($imgurl) / 2;
  16.     height: image-height($imgurl) / 2;
  17.  
  18.     //设置图标的位置
  19.     background-position: nth($pos, 1) / 2 nth($pos, 2) / 2;
  20.     //使用compass的Css3模块 兼容处理背景图片大小
  21.     @include background-size(ceil(image-width(sprite-path($sprite)) / 2) auto);
  22. }
  23.  
  24. @mixin img-common($name) {
  25.     @include img-sprite($sprites_common, $name, "common");
  26. }
  27.  
  28. //设定icon的图片信息
  29. .common{
  30.     //下面这句代码会触发图标合成一张图
  31.     background-image: sprite-url($sprites_common);
  32.     background-repeat: no-repeat;
  33.     display: inline-block;
  34.     .icon-baike{
  35.         @include img-common('ic_baike')
  36.     }
  37.     .icon-ic_card_gongshang{
  38.         @include img-common('ic_card_gongshang')
  39.     } 
  40. }

编译之后的css文件:

  1. /* line 29, ../sass/ie.scss */
  2. .common {
  3.   background-image: url('/img/common-sbb7f65b409.png');
  4.   background-repeat: no-repeat;
  5.   display: inline-block;
  6. }
  7. /* line 34, ../sass/ie.scss */
  8. .common .icon-baike {
  9.   width: 18px;
  10.   height: 20px;
  11.   background-position: -5px -1870px;
  12.   -moz-background-size: 59px auto;
  13.   -o-background-size: 59px auto;
  14.   -webkit-background-size: 59px auto;
  15.   background-size: 59px auto;
  16. }
  17. /* line 37, ../sass/ie.scss */
  18. .common .icon-ic_card_gongshang {
  19.   width: 30px;
  20.   height: 30px;
  21.   background-position: -5px -743px;
  22.   -moz-background-size: 59px auto;
  23.   -o-background-size: 59px auto;
  24.   -webkit-background-size: 59px auto;
  25.   background-size: 59px auto;
  26. }
  27. 更多相关文章

http://www.alliedjeep.com/145105.htm


发布日期:

所属分类: Css/Html5 标签: