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

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

  •  4
  • 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 年前
        1
  •  6
  •   Andrey Mikhaylov - lolmaus    12 年前

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

    有几个变通办法:

        2
  •  0
  •   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

        3
  •  0
  •   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