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

Question

我正在使用 Compass 生成我的精灵，它运行良好，但我遇到了一个小烦恼。在另一个@include 中时，我无法使用@include 语句包含单个精灵，例如我常用的媒体查询混合。我的精灵 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 语句，而且显然精灵@include 在幕后生成@extend 语句，这是我不想要的。有人知道解决这个问题的方法吗？

编辑：

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

Answer 1

在媒体查询中使用 Compass sprite 是不可能的，至少按照文档中描述的方式是不可能的。

有几种解决方法：

• 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