Sass combinando pai usando "e" comercial (&) com seletores de tipo

Estou tendo problemas com aninhamento em Sass. Digamos que eu tenha o seguinte HTML:

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

Quando tento aninhar meus estilos no seguinte, recebo um erro de compilação:

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

Como faço referência a um seletor de tipo antes do seletor pai quando ele faz parte do mesmo elemento?

Como Kumar aponta , isso é possível desde Sass 3.3.0.rc.1 (Maptastic Maple).

A diretiva @ at-root faz com que uma ou mais regras sejam emitidas na raiz do documento, em vez de serem aninhadas abaixo de seus seletores pais.

Podemos combinar a @at-rootdiretiva com a interpolação#{} para chegar ao resultado pretendido.

SASS

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

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

CSS de saída

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

O @at-rootmétodo -only não resolverá o problema se você pretende estender o seletor mais próximo para cima na cadeia. Como um exemplo:

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

Compilará para:

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

E se você precisar inserir sua tag em em .elementvez de #id?

Existe uma função no Sass chamada selector-unify()que resolve isso. Usando isso com @at-rooté possível direcionar .element.

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

Compilará para:

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

Para começar, (no momento em que escrevi esta resposta) não há sintaxe sass que usa o seletor & . Se você fosse fazer algo assim, precisaria de um espaço entre o seletor e o E comercial. Por exemplo:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

A outra maneira de usar o E comercial é provavelmente o que você está procurando (incorretamente):

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Isso permite que você estenda os seletores com outras classes, IDs, pseudo-seletores, etc. Infelizmente para o seu caso, isso teoricamente compilaria para algo como .itema que obviamente não funciona.

Você pode apenas querer repensar como está escrevendo seu CSS. Existe um elemento pai que você poderia usar?

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

Dessa forma, você poderia facilmente escrever seu SASS da seguinte maneira:

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

(Observação: você deve dar uma olhada em seu html. Você está misturando aspas simples e duplas E colocando atributos href em tags p.)

AFAIK No caso de você querer combinar "e" comercial para a classe e as tags ao mesmo tempo, você precisa usar esta sintaxe:

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

irá compilar para

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

Outros usos (como usar a classe antes @at-rootou usar vários@at-root s) levarão a erros.

Espero que seja útil

Esse recurso chegou na versão mais recente do Sass, 3.3.0.rc.1(Maptastic Maple)

Os dois recursos intimamente relacionados que você precisará usar são o script &, que você pode interpolar em estilos aninhados para fazer referência a elementos pais, e o@at-root diretiva, que coloca o seletor imediatamente seguinte ou bloco de css na raiz (não tem algum pai no css gerado)

Veja este problema no Github para mais detalhes