scss Compass中精灵生成的高级示例

Posted 2021-05-18

// 
// Usage example:
//    Image folder:
//      ic-soc/
//        fb.png
//        tw.png
//        vk.png
//
//    HTML:
//      <i class="ic-soc ic-soc_fb"></i>

// Use horizontal layout instead smart because problem with no spacing between
// sprite parts.
$map: sprite-map(
    'ic-soc/*.png',
    $layout: horizontal,
    $spacing: 5px
);
$names: sprite-names($map);

.ic-soc {
  display: inline-block;
  vertical-align: middle;
  background-image: $map;
}

@each $ic-name in $names {
  .ic-soc_#{$ic-name} {
    background-position: sprite-position($map, $ic-name);
    @include sprite-dimensions($map, $ic-name);
  }
}