代码之家 › 专栏 › 技术社区 › jordancooperman

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

compass-sass sass css

jordancooperman · 技术社区 · 12 年前

我正在使用Compass生成我的精灵,它运行得很好,但我遇到了一个小麻烦。当我在另一个@include(例如我通常使用的媒体查询mixin)内部时,我无法使用@include语句包含单个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。我想这是不允许的,不管怎样?

3 回复 | 直到 12 年前

Andrey Mikhaylov - lolmaus 12 年前

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

有几个变通办法:

creating sprites manually 通过命令行;
使用 custom mixin .

Adrian Enriquez 11 年前

这里有一个SASS(SCSS)混合,用于生成一个可以处理媒体查询的sprite声明块

南海:

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

Steven 10 年前

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

主旨: @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