Question

我正在使用Compass（默认引擎）来生成精灵。这是我写的SCSS

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

header.top-header {
    .back-icon a {
        @include icons-sprites(arrow-left-white);
    }
    .menu-icon a {
        @include icons-sprites(list-white);  
    }
}

我希望它会产生

header.top-header .back-icon a {
    background-position: 0 -787px;
}
header.top-header .menu-icon a {
    background-position: 0 -931px;
}

但相反，我得到了这个

header.top-header .back-icon a .icons-arrow-left-white {
    background-position: 0 -787px;
}
header.top-header .menu-icon a .icons-list-white {
    background-position: 0 -931px;
}

我应该为Compass配置什么来按照我喜欢的方式放置背景位置？

Answer 1

@import "compass/utilities/sprites";

//where you generate sprite
$icons: sprite-map("icons/*.png");

//add generated image sprite to .icons class
.icons{
  background: $icons;
}

header.top-header {
  .back-icon a {
    background-position: sprite-position($icons, arrow-left-white);
  }
  .menu-icon a {
    background-position: sprite-position($icons, list-white);
  }
}

您可以在此处找到更多信息：http://compass-style.org/reference/compass/helpers/sprites/

指南针：为给定的选择器生成精灵

1 个答案: