Question

我正在使用Compass来生成我的精灵，并且它工作得非常漂亮，但我遇到了一个小烦恼。当我在另一个@include中使用时，我无法使用@include语句包含单个精灵，例如我常用的媒体查询mixin。我的精灵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）mixin，用于生成一个可用于媒体查询的精灵声明块

<强> 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

指南针精灵 - 避免在包含精灵时使用扩展

3 个答案: