Üst işareti ve işareti (&) kullanarak tür seçicilerle birleştiren sass

Sass'ta yuva yapmakta sorun yaşıyorum. Aşağıdaki HTML'ye sahip olduğumu varsayalım:

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

Stillerimi aşağıdakilere yerleştirmeye çalıştığımda bir derleme hatası alıyorum:

.item {
    color: black;
    a& {
        color:blue;
   }
}

Aynı elemanın parçası olduğunda, üst seçiciden önce bir tür seçiciye nasıl başvurabilirim?

Kumar'ın işaret ettiği gibi , bu Sass'tan beri mümkün 3.3.0.rc.1 (Maptastic Maple).

@ At-root yönergesi, bir veya daha fazla kuralın, üst seçicilerinin altına yerleştirilmek yerine, belgenin kökünde yayınlanmasına neden olur.

Biz birleştirebilirsiniz @at-rootyönergesi ile birlikte enterpolasyon#{} amaçlanan sonuca varmak.

SASS

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

CSS Çıktısı

.item {
    color: black;
}
a.item {
    color: blue;
}

@at-rootEğer zincirin yukarı yakın seçici uzatmak niyetinde olmadığını -sadece yöntem sorunu çözmez. Örnek olarak:

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

Şu şekilde derlenecek:

div#id > .element {
    color: blue;
}

Bunun .elementyerine etiketinize katılmanız gerekirse ne olur #id?

Sass'ta selector-unify()bunu çözen bir işlev var . @at-rootBunu kullanarak hedeflemek mümkündür .element.

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

Şu şekilde derlenecek:

#id > div.element {
    color: blue;
}

Yeni başlayanlar için (bu cevabı yazarken) seçici & kullanan bir sass sözdizimi yoktur . Böyle bir şey yapacak olsaydın, seçici ile ve işareti arasında bir boşluk olması gerekirdi. Örneğin:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

Ve işaretini kullanmanın diğer yolu, muhtemelen (yanlış) aradığınız şeydir:

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Bu, seçicileri diğer sınıflarla, kimliklerle, sözde seçicilerle vb. Genişletmenize izin verir. Ne yazık ki sizin durumunuz için, bu teorik olarak .itema gibi bir şeye derlenir ve bu açıkça işe yaramaz.

CSS'nizi nasıl yazdığınızı yeniden düşünmek isteyebilirsiniz. Kullanabileceğiniz bir ana öğe var mı?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

Bu şekilde, SASS'nizi aşağıdaki şekilde kolayca yazabilirsiniz:

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(Yan not: html'nize bir göz atmalısınız. Tek ve çift tırnakları karıştırıyorsunuz VE href niteliklerini p etiketlerine koyuyorsunuz.)

AFAIK Sınıf ve etiketler için ve işaretlerini aynı anda birleştirmek isterseniz, bu sözdizimini kullanmanız gerekir:

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

derlenecek

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

Diğer kullanımlar ( @at-rootbirden fazla sınıftaki sınıfın kullanılması gibi @at-root) hatalara yol açacaktır.

Umarım faydalı olur

Bu özellik, Sass'ın en yeni sürümüne indi, 3.3.0.rc.1(Maptastic Maple)

Kullanmanız gereken birbiriyle yakından ilişkili iki özellik &, üst öğelere başvurmak için yuvalanmış stiller içinde enterpolasyon yapabileceğiniz komut dosyası yazılabilir @at-rootve hemen ardından gelen css seçicisini veya bloğunu köke yerleştiren direktiftir ( çıkarılan css'de herhangi bir ebeveyn var)

Daha fazla ayrıntı için bu Github sorununa bakın