Bir öğe sınıfım ve kompakt bir "değiştirici" sınıfım var:

.item { ... }
.item.compact { /* styles to make .item smaller */ }

Bu iyi. Bununla birlikte, ekran yeterince küçük olduğunda sınıfı kompakt olmaya @mediazorlayan bir sorgu eklemek istiyorum .item.

İlk düşündüğümde, yapmaya çalıştığım şey buydu:

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

Ancak bu, aşağıdaki hatayı oluşturur:

@Media içinden bir dış seçiciyi @ genişletemezsiniz. Aynı direktif içinde yalnızca @ genişletme seçicileri yapabilirsiniz.

Stilleri kopyalamak / yapıştırmak zorunda kalmadan bunu SASS kullanarak nasıl başarabilirim?

Basit cevap: Yapamazsınız çünkü Sass bunun için seçiciyi oluşturamaz (veya yapmaz). Bir medya sorgusunun içinde olamaz ve bir medya sorgusunun dışında olan bir şeyi genişletemezsiniz. Seçicileri oluşturmaya çalışmak yerine sadece bir kopyasını alırsa kesinlikle güzel olurdu. Ama yapamazsın diye değil.

Bir karışım kullanın

Medya sorgularının içinde ve dışında bir kod bloğunu yeniden kullanacağınız bir durumunuz varsa ve yine de onu genişletebilmesini istiyorsanız, hem bir mixin hem de bir ext sınıfı yazın:

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

Seçiciyi dışarıdan bir medya sorgusu içinde genişletin

Bu, kullanım durumunuza gerçekten yardımcı olmaz, ancak başka bir seçenektir:

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}

Sass bu kısıtlamayı kaldırana kadar bekleyin (veya kendiniz düzeltin)

Bu konuyla ilgili devam eden bir dizi tartışma var (ekleyecek anlamlı bir şeyiniz yoksa lütfen bu konulara katkıda bulunmayın: bakımcılar, kullanıcıların bu işlevi istediğinin zaten farkındadırlar, bu sadece nasıl uygulanacağı ve ne sözdizimi olmalıdır).

• https://github.com/sass/sass/issues/1050
• https://github.com/sass/sass/issues/456

Kayıt için, oluşturulan stilleri yalnızca bir kez çoğaltarak sorunu nasıl çözdüm:

// This is where the actual compact styles live
@mixin compact-mixin { /* ... */ }

// Include the compact mixin for items that are always compact
.item.compact { @include compact-mixin; }

// Here's the tricky part, due to how SASS handles extending
.item { ... }
// The following needs to be declared AFTER .item, else it'll
// be overridden by .item's NORMAL styles.
@media (max-width: 600px) {
  %compact { @include compact-mixin; }

  // Afterwards we can extend and
  // customize different item compact styles
  .item {
    @extend %compact;
    /* Other styles that override %compact */
  }
  // As shown below, we can extend the compact styles as many
  // times as we want without needing to re-extend
  // the compact mixin, thus avoiding generating duplicate css
  .item-alt {
    @extend %compact;
  }
}

SASS / SCSS'nin @extendmedya sorgusunun içindeki yönergeyi desteklemediğine inanıyorum .http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/

Bunun yerine bir mixin kullanmanız gerekebilir, ancak kod şişmesinin hedefinize göre tartılması gerekir.

Bulduğum en temiz, kısmi çözüm bu. Mümkün olduğunda @extend avantajından yararlanır ve medya sorguları içindeyken mikslere geri döner.

Cross-Media Query @extend Direktifleri Sass'ta

Tüm ayrıntılar için makaleye bakın, ancak ana fikir, daha sonra @extend veya @include çıktısını vereceğinize karar veren bir mixin 'yer tutucu' çağırmanızdır.

@include placeholder('clear') {
   clear: both;
   overflow: hidden;
}

.a {
    @include _(clear);
}
.b {
    @include _(clear);
}
.c {
    @include breakpoint(medium) {
      @include _(clear);
   }
}

Nihayetinde, şu anda kabul edilen cevap olan mixin kullanmaktan daha iyi olmayabilir.

Kesme noktaları kullanıyorum, ancak aynı fikir:

@mixin bp-small {
    @media only screen and (max-width: 30em) {
        @content;
    }

Bu nasıl kullanılır:

.sidebar {
    width: 60%;
    float: left;
    @include bp-small {
        width: 100%;
        float: none;
    }
}

Orada bir metin daha bu seçenek hakkında öğrenebilirsiniz Mixins hakkında.

Yeniden yapılandırabilir misin?

.compact { //compact-styles }
.item {}
.item.compact { @extend .compact } 

@media (max-width: 600px) {
    .item { @extend .compact; }
}

Belgeleri doğru anladıysam, bu işe yaramalı. Bence denemenizin işe yaramamasının nedeni, @extend'i ayrıştırırken .item.compact'i görmemesi, ama bu bilgisiz bir tahmin, o yüzden bunu bir kamyon dolusu tuzla alın! :)