6

我想为两种不同的场景使用 Compass 生成的图标精灵。

  1. 使用原始大小的图标。
  2. 使用与使用 CSS3 属性的较小版本相同的图标background-size。

我首先这样做：

$logo-spacing: 20px;
@import "logo/*.png";
@include all-logo-sprites;

现在我可以使用一般创建的 CSS 类等.logo-twitter。

两个实现了第二个结果，我可以使用它（darren131 / gist:3410875 - resize sprites in Compass）：

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));
  background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );
}

.my-other-div-with-small-logos {
    .logo-twitter {
        $spriteName: twitter;
        $percentage: 40;

        @include resize-sprite($logo-sprites, $spriteName, $percentage);
    }
}

但是，如果我有大约 30 个徽标，我需要为每个精灵类手动重复此操作。

是否可以两次导入文件夹，一次是原始大小，第二次是backround-size属性？或者修改上述方法以在另一个<div class="my-other-div-with-small-logos">图标应该看起来更小的地方自动创建所有类？

还是我在这里想错了方向？

4

3 回答 3

4

这样做。它遍历整个地图：

@each $sprite in sprite_names($logo-sprites) {
    .logo-#{$sprite} {
        @include resize-sprite($logo-sprites, $sprite, 40);
    }
}

这有助于：在地图中迭代精灵的方法

在现代浏览器中缩小精灵而不加载另一个生成的精灵图像是很棒的。如果徽标有时是 50 像素，但在其他地方也应该是 20 像素，这很好。

于 2013-01-11T04:25:46.157 回答
3

谢谢大家。有用！现在，我继续扩展它，因为我需要一些更动态的东西，其中图标是基于 ico-[size] ico-[image] 和 swatch-[color] 构建的

$myicons-spacing: 20px;

@import "icons/myicons/*.png";
@include all-myicons-sprites;


@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath    :  sprite-path($map);
  $spriteWidth   :  image-width($spritePath);
  $spriteHeight  :  image-height($spritePath);
  $width         :  image-width(sprite-file($map, $sprite));
  $height        :  image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));

  width                :  ceil($width*($percent/100));
  height               :  ceil($height*($percent/100));
  background-position  :  0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );
}

@each $sprite in sprite_names($myicons-sprites) {
  .ico-xsmall.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 35);
  }

  .ico-small.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 50);
  }

  .ico-medium.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 87.5);
  }

  .ico-large.myicons-#{$sprite} {
    @extend .myicons-#{$sprite};
    @include resize-sprite($myicons-sprites, $sprite, 100);
  }
}
于 2013-08-22T21:50:39.820 回答
1

为每个循环创建占位符，然后在需要的地方包含占位符。例如：

@mixin resize-sprite($map, $sprite, $percent) {
  $spritePath:    sprite-path($map);
  $spriteWidth:   image-width($spritePath);
  $spriteHeight:  image-height($spritePath);
  $width: image-width(sprite-file($map, $sprite));
  $height: image-height(sprite-file($map, $sprite));

  @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100)));
  width: ceil($width*($percent/100));
  height: ceil($height*($percent/100));
  background-position: 0 floor(nth(sprite-position($map, $sprite), 2)  * ($percent/100) );
}

@each $image in twitter, facebook, pinterest {
  %logo-#{$image} {
    @include resize-sprite($logo-sprites, $image, 40);
  }
}

.my-other-div-with-small-logos {
    .logo-twitter {
        @extend %logo-twitter;
    }
}

请注意，这假设所有图像都应调整 40% 的大小。如果您需要为不同的徽标指定不同的百分比，则需要进行更多的创意迭代。

更好的是，也许只是在循环中生成类？

.my-other-div-with-small-logos {
  @each $image in twitter, facebook, pinterest {
    .logo-#{$image} {
      @include resize-sprite($logo-sprites, $image, 40);
    }
  }
}
于 2013-01-05T22:09:55.087 回答