Compass sprite -在包含sprite时避免使用扩展

Question

我正在使用Compass生成我的精灵，它工作得很好，但我遇到了一个小麻烦。我不能在另一个@include中使用@include语句来包含单个sprite，比如我经常使用的媒体查询混合。我的sprite SCSS看起来像这样：

.sp {
    background-repeat: no-repeat;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    text-indent: 100%;
    border: 0;
}

$sp-sprite-dimensions: true;
$sp-sprite-base-class: '.sp';
$sprite-layout: smart;
@import "sp/*.png";
@include all-sp-sprites;

在另一个位置，我尝试这样做：

.logo {
    a {
        @include break($break1) {
            @include sp-sprite(logo-small);
        }
    }
}

SCSS支持嵌套的@include语句，但它不允许在@include语句中使用@extend语句，而且很明显，sprite @include会在幕后生成@extend语句，这是我不想要的。有人知道解决这个问题的方法吗？

编辑：

@lolmaus让我注意到，真正的问题是我在媒体查询中嵌套了一个@extend。我想这是不允许的，有什么办法可以绕过它吗？

Answer 1

在媒体查询中使用Compass精灵是不可能的，至少在文档中是这样描述的。

有几种解决方法：

通过命令行执行

• creating sprites manually；使用custom mixin.

执行

Answer 2

下面是一个SASS (SCSS)混入，用于生成一个可以处理媒体查询的sprite声明块

SCSS:

// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {

  //http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
  $sprite-image: sprite-file($map, $sprite);

  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
  $sprite-map: sprite-url($map);

  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
  $sprite-position: sprite-position($map, $sprite);

  // Returns background
  background: $sprite-map $sprite-position $repeat;

  // http://compass-style.org/reference/compass/helpers/image-dimensions/
  // Checks to see if the user wants height returned
  @if $height == true {
    // Gets the height of the sprite-image
    $sprite-height: image-height($sprite-image);
    // Returns the height
    height: $sprite-height; }

  // http://compass-style.org/reference/compass/helpers/image-dimensions/
  // Checks to see if the user wants height returned
  @if $width == true {
    // Gets the width of the sprite-image
    $sprite-width: image-width($sprite-image);
    // Returns the width
    width: $sprite-width; }
}

使用：

$icons: sprite-map("sprites/icons/*.png"); // define a sprite map 

// ... later

@media only screen and (max-width: 500px) {
    .video .overlay {
        @include get-sprite($icons, play-btn-large);
    }
}

Source: GitHubGist - brubrant / get-sprite.scss

Answer 3

下面的代码描述了如何做到这一点

要点：@extend Compass sprites in @media queries

/*
 * A simple way to extend Compass sprite classes within media queries.
 * Based on the knowledge gained here: http://www.sitepoint.com/cross-media-query-extend-sass/
 * I admit it's nowhere near as clever, but it does work :)
 */


/*
 * Set-up sprites for each media size
 */

// default
@import "icons-sm/*.png"
@include all-icons-sm-sprites

// corresponding sprites for larger devices
// notice that @import is within the @media query
// that's critical!

@media (min-width: $large)
  @import "icons-lg/*.png"
  @include all-icons-lg-sprites

/*
 * Now you can do something like this
 */

// an example mixin

@mixin social-links($size)
  $socials: facebook, twitter, youtube
  @each $social in $socials
    &.#{$social}
      @extend .icons-#{$size}-#{$social}

/*
 * Put to use
 */

// assuming you've got mark-up like this

<p class="social">
  <a href="#" class="facebook">facebook</a>
  <a href="#" class="twitter">twitter</a>
  <a href="#" class="youtube">youtube</a>
</p>

// you can do this                          
.social
  a
    @include social-links(sm)
    width: 25px
    height: 25px
    @media (min-width: $large)
      @include social-links(lg)
      width: 50px
      height: 50px