我正在使用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使其以我想要的方式放置背景位置?

最佳答案

@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/

关于css - compass :为指定选择器生成 Sprite ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20512952/

10-10 18:28
查看更多