Usando el símbolo comercial (selector padre SASS) dentro de los selectores anidados

Question

Bien, esto me ha molestado ya que he estado usando Sass/Scss durante el último año más o menos. Entiendo el selector de padres en su sentido general.

Aquí es donde me esfuerzo (si no está documentada o simplemente no es posible):

#parent { 
    #child { 
    width: 75%; 

    .additional_parent_class & { 
     width: 50%; 
    } 
    } 
} 

Esto básicamente se convierten en:

.additional_parent_class #parent #child { 
    width: 50%; 
} 

Si bien esto tiene sentido debido a la aplicación de la ampersand y cómo se usa. ¿Qué pasa si estoy tratando de conseguir que para lograr esto:

#parent.additional_parent_class #child { 
    width: 50%; 
} 

La única manera que he sido capaz de lograr esto es escribiendo otra regla fuera de las declaraciones del niño:

#parent{ 
    #child { 
    width: 75%; 
    } 

    &.additional_parent_class #child { 
    width: 50%; 
    } 
} 

Si bien esto no es necesariamente un "dolor en el trasero" en esta implementación, parece contraproducente si #child tiene hijos propios que ahora necesitarán ser duplicados en ambas reglas.

De todos modos, tal vez estoy siendo exigente, pero sería genial si hubiera más formas de atravesar los selectores.

¿Alguien sabe algo que yo no?

Gracias!

Answer 1

Acepto que sería muy útil. Desafortunadamente, actualmente no es posible en SASS (o cualquier otro preprocesador de CSS que conozca).

Answer 2

Aunque actualmente no es posible, esta y muchas mejoras similares a la sintaxis & están programadas para su lanzamiento en Sass 3.3. Puede seguir la discusión sobre la función en el número de Sass here.

Answer 3

Esto es capaz en v3.4 podría estar en 3.3 pero no está seguro. Aunque no soy un fanático de la sintaxis. & es mucho más fácil. Desearía que había algo así como &^para un alias :)

#parent { 
    #child { 
     width: 75%; 
     @at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} { 
      width: 50%; 
     } 
    } 
}