Sass combina padre usando ampersand (&) con selectores de tipo

Tengo problemas para anidar en Sass. Digamos que tengo el siguiente HTML:

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

Cuando intento anidar mis estilos en lo siguiente, aparece un error de compilación:

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

¿Cómo hago referencia a un selector de tipo antes del selector principal cuando es parte del mismo elemento?

Como señala Kumar , esto ha sido posible desde Sass 3.3.0.rc.1 (Maptastic Maple).

La directiva @ at-root hace que una o más reglas se emitan en la raíz del documento, en lugar de anidarse debajo de sus selectores principales.

Podemos combinar la @at-rootdirectiva junto con la interpolación#{} para llegar al resultado deseado.

HABLAR CON DESCARO A

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

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

CSS de salida

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

El @at-rootmétodo -only no resolverá el problema si tiene la intención de extender el selector más cercano en la cadena. Como ejemplo:

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

Se compilará para:

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

¿Qué sucede si necesita unir su etiqueta a en .elementlugar de #id?

Hay una función en Sass llamada selector-unify()que resuelve esto. Usando esto con @at-rootes posible apuntar .element.

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

Se compilará para:

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

Para empezar, (al momento de escribir esta respuesta) no hay una sintaxis sass que use selector & . Si fuera a hacer algo así, necesitaría un espacio entre el selector y el ampersand. Por ejemplo:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

La otra forma de usar el ampersand es probablemente lo que está buscando (incorrectamente):

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Esto le permite extender los selectores con otras clases, ID, pseudo-selectores, etc. Desafortunadamente para su caso, esto teóricamente se compilaría en algo como .itema que obviamente no funciona.

Es posible que desee reconsiderar cómo está escribiendo su CSS. ¿Hay algún elemento principal que pueda utilizar?

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

De esta manera, podría escribir fácilmente su SASS de la siguiente manera:

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

(Nota al margen: debería echar un vistazo a su html. Está mezclando comillas simples y dobles Y poniendo atributos href en etiquetas p).

AFAIK En caso de que desee combinar el ampersand para la clase y las etiquetas al mismo tiempo, debe utilizar esta sintaxis:

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

se compilará para

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

Otros usos (como usar la clase antes @at-rooto usar múltiples @at-roots) conducirán a errores.

Espero que te sea de utilidad

Esta función ha llegado a la versión más reciente de Sass, 3.3.0.rc.1(Maptastic Maple)

Las dos características estrechamente relacionadas que necesitará usar son el programable &, que puede interpolar dentro de estilos anidados para hacer referencia a elementos principales, y la @at-rootdirectiva, que coloca el selector o bloque de CSS inmediatamente siguiente en la raíz (no lo hará). tener padres en el css generado)

Consulte este problema de Github para obtener más detalles.