Sass che combina genitore usando e commerciale (&) con selettori di tipo

Ho problemi con l'annidamento in Sass. Supponiamo che io abbia il seguente codice HTML:

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

Quando provo a nidificare i miei stili nel seguente, ottengo un errore di compilazione:

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

Come faccio a fare riferimento a un selettore di tipo prima del selettore principale quando fa parte dello stesso elemento?

Come sottolinea Kumar , questo è stato possibile sin dal Sass 3.3.0.rc.1 (Maptastic Maple).

La direttiva @ at-root fa sì che una o più regole vengano emesse alla radice del documento, invece di essere annidate sotto i selettori principali.

Possiamo combinare la @at-rootdirettiva con l' interpolazione#{} per arrivare al risultato desiderato.

SASS

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

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

Output CSS

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

Il @at-rootmetodo -only non risolverà il problema se si intende estendere il selettore più vicino a monte della catena. Come esempio:

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

Compilerà per:

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

E se avessi bisogno di unire il tuo tag al .elementposto di #id?

C'è una funzione in Sass chiamata selector-unify()che risolve questo problema. Usando questo con @at-rootè possibile targetizzare .element.

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

Compilerà per:

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

Per i principianti, (al momento della stesura di questa risposta) non esiste una sintassi sass che utilizzi il selettore & . Se avessi intenzione di fare qualcosa del genere, avresti bisogno di uno spazio tra il selettore e la e commerciale. Per esempio:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

L'altro modo di usare la e commerciale è probabilmente quello che stai cercando (erroneamente):

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Questo ti permette di estendere i selettori con altre classi, ID, pseudo-selettori, ecc. Sfortunatamente per il tuo caso, teoricamente si compilerebbe in qualcosa come .itema che ovviamente non funziona.

Potresti semplicemente ripensare a come stai scrivendo il tuo CSS. C'è un elemento genitore che potresti usare?

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

In questo modo, potresti facilmente scrivere il tuo SASS nel modo seguente:

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

(Nota a margine: dovresti dare un'occhiata al tuo html. Stai mescolando virgolette singole e doppie E inserendo attributi href sui tag p.)

AFAIK Nel caso in cui desideri combinare e commerciale per classe e tag allo stesso tempo, devi usare questa sintassi:

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

compilerà in

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

Altri usi (come usare la classe prima @at-rooto usare più messaggi @at-root) porteranno a errori.

Spero che sia utile

Questa funzione è arrivata nella versione più recente di Sass, 3.3.0.rc.1(Maptastic Maple)

Le due funzionalità strettamente correlate che dovrai usare sono lo script & , che puoi interpolare all'interno di stili annidati per fare riferimento a elementi genitore, e la @at-rootdirettiva, che posiziona il selettore o il blocco css immediatamente successivo alla radice (non lo farà avere genitori nel css emesso)

Vedi questo numero di GitHub per maggiori dettagli