4

Compass を使用してスプライトを生成していますが、問題なく動作していますが、小さな問題が 1 つあります。私が一般的に使用するメディア クエリ mixin などの別の @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);
        }
    }
}

ネストされた @include ステートメントは SCSS では問題ありませんが、@include ステートメント内で @extend ステートメントを使用することはできません。スプライト @include が舞台裏で @extend ステートメントを生成しているようです。これは望ましくありません。誰もこれを回避する方法を知っていますか?

編集：

本当の問題は、@extend をメディア クエリ内にネストしていることであることが @lolmaus から指摘されました。それは許可されていないと思いますが、それを回避する方法はありますか？

4

3 に答える 3

0

次のコードは、その方法を説明しています

要点: @media クエリでの @extend Compass スプライト

/*
 * 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
于 2014-12-24T16:24:45.490 に答える